5分钟 0元搭建个人独立博客网站(一)
文/北媽
閱讀本文需要 3.5分鐘
一
直接入正題,先看北媽個人博客地址:http://www.guoxiaobei.com
微信不允許加入外鏈,你只能復制去外部瀏覽器打開,或者看完文章在底部的?“閱讀原文”,可以直接進去。
這個時代,普通人擁有自己的獨立博客或網站有多么重要不用再說了,更不用說我們是程序員。
很久之前答應過大家,點贊超過200,就放出獨立博客教程,結果那篇文章直接到了300贊,沒法逃了。
而且也足以證明,大家是多么渴望擁有一個自己的網站。
但傳統意義上,建立網站是需要花錢的,服務器、數據庫等,而且價格還不菲呢,那怎么辦?
聰明人早有辦法,那就是利用github + 自動生成程序+幾句命令直接組建網站,其實網絡有很多配置教程了。
如果覺得北媽寫的不好,可以自行搜索,大同小異,只不過我寫的更為清晰、易懂。
先看下我的博客在github的 開源地址:
https://github.com/xiaobei666/xiaobei666.github.io.git
由于這個屬于教程系列,涉及到一系列命令、代碼、配置,由于在微信公眾號不好展示,長篇也說不明白。
所以我把這個【5分鐘 0元搭建獨立博客系列】分為3篇,今天先放出“一”。
希望大家多多轉發和收藏,好東西千萬不要捂著。
二
說明條件:Github Pages +?Hexo + Node.js。
系統環境:我是MAC電腦的OSX系統,所以截圖和命令都是mac的,但和windows一樣,這個不用擔心。
大體流程:其實簡單,就是命令
擁有一個github pages
在本地電腦里配置hexo的環境(hexo與github pages綁定,寫博文修改博文等,生成靜態博客)
綁定自己的域名(也可以不用綁定,github pages有二級域名,只不過綁有一個屬于自己的域名,才算真正的個人網站)
這是一篇有關如何使用Github Pages和博客程序 Hexo搭建自己獨立博客的入門詳細教程,里面介紹了如何將Hexo部署到自己的Github項目中,并且可以獨立訪問。
第一篇,先介紹?Github Pages +?Hexo 是什么,并且安裝命令和配置,達到本機訪問。
第一步:關于Github、Github Pages建立倉庫
一、Github的優點
GitHub是基于git實現的代碼托管。理論上可以建立無限個網站。
GitHub可以免費使用,并且快速穩定。
Github上面很多開源庫,所以你懂得。
二、什么是Github Pages
Github Pages可以被認為是用戶編寫的、托管在github上的靜態網頁。
它是github官方提供的,靜態解決方案,就是為了讓你展示自己的文檔和網頁效果
三、為什么要使用Github Pages
可以綁定你的域名(但暫時貌似只能綁定一個)。
簡單快捷,使用Github Pages可以為你提供一個免費的服務器,免去了自己搭建、購買服務器和寫數據庫的麻煩。
所以,這個Github Pages 其實就是傳統意義的放網頁的服務器,明白了么?
三
不用多問,按步驟開始
1、建立你的?Github Pages 倉庫
創建Github Pages比較簡單,只要你有一個github賬號在創建一個倉庫就行了,但是這個倉庫是有規則的,其格式必須為:你的名字.github.io
比如我的:xiaobei666.github.io
然后根據提示一直下一步就行,非常簡單。
如果你連github 賬戶都沒有、不會創建,那么請你先去熟悉下github,不然我們沒法往下玩兒了。
如果你沒聽過github,我覺得你可以退出程序員行業了。
2、安裝 Hexo
前提:必須安裝Node.js?,也就是要用npm命令來安裝。如果你身為2019年的前端,連npm 命令都沒用過,我請你趕緊學習了。
我這里默認你安裝了node.js,如果我還交你怎么安裝nodejs,是不是還要交你怎么開機?
Hexo介紹
Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。
Hexo的安裝網上有很多教程,但很多都是粘貼復制,過時、過期的命令,而且版本不同,命令也有差異,所以最好的還是參考Hexo官方的安裝教程來一步一步走。
Hexo安裝
安裝命令:$ npm install -g hexo-cli
打開你的系統終端,windows系統可以鼠標右鍵點擊Git Bash Here,輸入npm命令即可安裝。
mac系統的不用介紹了吧。
npm install hexo-cli -g npm install hexo-deployer-git --save
第一句是安裝hexo。
第二句是安裝hexo部署到 git page的deployer,兩個都需要安裝。
創建Hexo文件夾
安裝Hexo完成后,根據自己喜好建立目錄(如F:\Blog\Hexo),直接進入F:\Blog\Hexo文件夾下右鍵鼠標,點擊Git Bash Here,進入Git命令框,執行以下操作。
hexo init
$ npm install
安裝 Hexo 完成后,Hexo 將會在指定文件夾中新建所需要的文件。整個過程都是自動化的。
執行? $ npm install 后,會根據 package.json 里的信息,自動安裝插件,所有過程不用管。
這時候,其實hexo已經在你的機器上了,也就是我們常說本地開發版。
如果你想看本地效果,就這樣。
執行下面語句,執行完即可登錄 localhost:4000 查看效果
hexo generate hexo server
到這里,篇幅已經很長了,所以今天第一篇到這里結尾。
已經實現了,讓你看到廬山真面目,只不過這個“廬山” ,還沒有正式對外發布。
但你已經可以在本地服務器,通過傳統的?localhost:4000 查看并且修改了。
至于怎么寫博客,你先看下這個hexo的官方說明記錄,先了解個大概,后面第二篇,很快上來。
hexo 中文官方文檔:?https://hexo.io/zh-cn/docs/setup.html
三
每天金句:“哪里有人喜歡孤獨,只不過不亂交朋友罷了,那樣只能落得失望”
老規矩,是平時不開贊賞,月底統一交租,但不耽誤你點?[好看]。
但今天,因為寫的好,而且寫的超級累,并且讓你擁有了真正意義上的獨立博客。
所以,今天我要開贊賞!
最后,今天有三篇文章,別忘了看嗯嗯。
延伸閱讀:
1.?年底了,小心這些現象。別再無動于衷
2.?找工作如何避免培訓機構騙局
3.?我為何一直強調外包公司別去
每天只想聽你們說:小北最帥!
長按掃碼關注我
前端你別鬧
總結
以上是生活随笔為你收集整理的5分钟 0元搭建个人独立博客网站(一)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 科大星云诗社动态20210526
- 下一篇: 一位工作了10年的C++程序员总结出这些