基于Hexo和GitHub免費搭建個人博客網(wǎng)站
時間：2023-04-23 09:21:01 | 來源：網(wǎng)站運營
時間：2023-04-23 09:21:01 來源：網(wǎng)站運營
基于Hexo和GitHub免費搭建個人博客網(wǎng)站：
1.引言
阮一峰大神說喜歡寫博客的人，會經(jīng)歷三個階段。
第一階段，剛接觸博客覺得很新鮮，試著選擇一個免費空間來寫。比如CSDN、博客園。
第二階段，發(fā)現(xiàn)免費空間限制太多，就自己購買域名和空間，搭建獨立博客。比如阿里云、騰訊云。
第三階段，覺得獨立博客的管理太麻煩，最好在保留控制權的前提下，讓別人來管，自己只負責寫文章。比如基于Hexo和GitHub免費搭建個人博客網(wǎng)站。
GitHub提供了Pages功能，只要將寫好的Markdown文章提交到Github上
托管，即可生成獨立博客，而且提供幾乎不限流量的存儲空間，一切都是免費的。一旦搭建好，則只需要負責寫文章就行了，不需要定期維護。
Hexo 是一個基于Node.js的靜態(tài)博客框架。Hexo使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題
生成靜態(tài)網(wǎng)頁。
- 之前介紹過寫Markdown文章的神器Typora，今天就讓我們來關注具體搭建個人博客網(wǎng)站的步驟。
- 本文是針對Windows10系統(tǒng)，其他諸如Mac系統(tǒng)還有Linux系統(tǒng)請參考百度相關內容。
2.Hexo的搭建步驟
2.1 安裝Git Bash
Git Bash（
https://git-scm.com/download/win）（復制到瀏覽器下載軟件）是用來管理你的Hexo博客文章，并將文章上傳到GitHub平臺的工具。
1）具體的安裝過程就是一直點擊next，直到出現(xiàn)install，點擊install，安裝完成后點擊finish，然后在任意文件夾下右鍵打開
Git Bsah Here輸入命令
git--version，查看有沒有安裝成功。
注意：右鍵點擊
Git Bash Here 如果出現(xiàn)下圖，則說明安裝路徑中有中文（軟件安裝）。
2.2 安裝Node.js
Hexo是基于Node.js（
https://nodejs.org/en/）（復制到瀏覽器下載軟件）編寫的，所以需要安裝該軟件。從官網(wǎng)下載，然后安裝即可，直接選擇LTS（長期支持版）版本的。
1）安裝完成后，打開
管理員命令行輸入命令
node-v以及
npm-v，查看有沒有安裝成功。
2.3 安裝Hexo
1）創(chuàng)建一個文件夾Blog，然后進入該文件夾右鍵
Git Bash Here打開。輸入命令
npm install-g hexo-cli，至此就安裝完成了。
2）安裝完成后，還需要初始化hexo，即執(zhí)行如下命令：
hexo initnpm install3）新建完成后，在Blog文件夾下會出現(xiàn)許多新的文件，目錄如下：
- node_modules：依賴包
- scaffolds：命令生成Markdown文章等的模板
- source：用命令創(chuàng)建的各種Markdown文章
- themes：主題文件夾，Hexo 會根據(jù)主題來生成靜態(tài)頁面。
- _config.yml：站點配置文件，您可以在此配置大部分的參數(shù)。
- db.json：source解析所得到的
- package.json：項目所需模塊項目的配置信息
4）輸入如下命令，然后在瀏覽器中輸入
localhost:4000(本地查看)即可查看用hexo生成的博客了。
hexo ghexo s使用ctrl+c可以把服務關掉。
5）至此，Blog文件夾下會多出兩個目錄
注意：出現(xiàn)bash：npm：command not found錯誤。
網(wǎng)上試了各種辦法，最后重啟一下電腦就沒有問題了。
3.Hexo關聯(lián)到GitHub
靜態(tài)頁面已經(jīng)有了，我們還需要將其部署到GitHub上。一來我們搭建博客想要別人可以（以一個鏈接）訪問到我們的博客，二來我們需要有個托管平臺，這樣我們就可以關注博客內容本身而不是麻煩的管理。
3.1 GitHub創(chuàng)建個人倉庫
1）首先注冊一個GitHub賬號
2）然后點擊New，新建倉庫
按照下圖所示操作后，點擊
Create repository即創(chuàng)建成功。
3.2生成SSH添加到GitHub
1）在git bash輸入如下命令
git config --global user.name "yourname"git config --global user.email "youremail"這里的yourname輸入你的GitHub用戶名，youremail輸入你GitHub的郵箱。這樣GitHub才能知道你是不是對應它的賬戶。
2)然后創(chuàng)建SSH,一路回車
ssh-keygen -t rsa -C "youremail"這個時候它會告訴你已經(jīng)生成了.ssh的文件夾。在你的電腦中找到這個文件夾后可以發(fā)現(xiàn)有兩個文件（一般位于C盤）。
3)然后在GitHub的setting中，找到SSH keys的設置選項，點擊
NewSSH key把
id_rsa.pub里面的信息復制進去。
SSH，簡單來講，就是一個秘鑰，其中，idrsa是你這臺電腦的私人秘鑰，不能給別人看的，idrsa.pub是公共秘鑰，可以隨便給別人看。把這個公鑰放在GitHub上，這樣當你鏈接GitHub自己的賬戶時，它就會根據(jù)公鑰匹配你的私鑰，當能夠相互匹配時，才能夠順利的通過git上傳你的文件到GitHub上。
3.3 將Hexo部署到GitHub
1）用Notepad++打開站點配置文件
_config.yml。搜索關鍵詞
deploy。將
YourgithubName對應的修改為你的
GitHub用戶名。
deploy: type: git repo: https://github.com/YourgithubName/YourgithubName.github.io.git branch: master2）這個時候需要先安裝
deploy-git ，也就是部署的命令,這樣你才能用命令部署到GitHub。
npm install hexo-deployer-git --save3）
hexo n bolgname然后就會發(fā)現(xiàn)在
Blog/source/_posts目錄下出現(xiàn)一個名為blogname的Markdown文章，用Typora軟件打開，文件最上方以
--- 分隔的區(qū)域，有用于指定個別文件的變量的Front-matter。我用的幾個參數(shù)具體包括：title，categories，tags，date。
用Typora打開模板文件
Blog/scaffolds/post.md文件，可以進行相應的設置。
4) 然后使用兩個命令即可將你寫好的文章（位于
Blog/source/_posts文件夾下）部署到GitHub。
hexo g # 生成靜態(tài)文章hexo d # 部署文章hexo s # 可以先從本地（localhost:4000）預覽效果，在部署文章到GitHub上注意：1）輸入
hexo d命令后需要你輸入username和password。
得到下圖就說明部署成功了，過一會兒就可以在
http://yourname.github.io 這個網(wǎng)站看到你的博客了。
2）在上面第三步中提到Front-matter，其中除了我使用的幾個參數(shù)外，還有其他參數(shù)。
3）另外，在上面第三步中提到
Blog/scaffolds目錄，其實該目錄下一共有三個文件，剛剛只提到了post.md，還有另外兩個文件。
然后這三個文件是對應三種不同的布局（layout）。
1.hexo n [layout] <tittle> # 之前在創(chuàng)建文章時，layout默認是post，名為title的文章在Blog/source/_posts文件夾下2.hexo n draft <tittle> # draft是草稿的意思，名為title的文章在Blog/source/_drafts文件夾下，hexo s --draft # 草稿寫好文章后，可以在本地開啟預覽hexo p draft <tittle> # 將名為title的文章發(fā)送到Blog/source/_posts文件夾下3.hexo new page board # 系統(tǒng)會自動在source文件夾下創(chuàng)建一個board文件夾，以及board文件夾中的index.md，這樣你訪問的board對應的鏈接就是http://xxx.xxx/board4.Hexo的基本頁面配置
4.1 hexo基本配置
用Notepad++打開站點配置文件
_config.yml，我們可以在
_config.yml中修改大部分的配置。
1）網(wǎng)站
2）網(wǎng)址
- url：網(wǎng)站域名
- permalink：分享某篇文章后在對方的網(wǎng)頁中顯示的域名。
3）其他設置默認就可以了，更多基本設置可以參考Hexo官網(wǎng)配置（
https://hexo.io/zh-cn/docs/configuration）內容。
4.2 更換主題
1）系統(tǒng)默認給的主題是
landscape，并且在hexo官網(wǎng)還提供了270個主題，可以先預覽選擇一個主題。
比如我個人喜歡next主題，那么怎么應用該主題呢。
2）點擊右上角從GitHub上面下載下來，然后再把整個文件夾放到Blog/themes目錄下。
3）然后將Blog目錄下_config.yml文件中的主題改為next。
4）進入
Blog/themes/next目錄下，里面也有一個配置文件
_config.yml，這個配置文件是修改你整個主題的配置文件。
文件搜索關鍵詞menu。
npm install hexo-generator-searchdb --save # 安裝插件修改站點配置文件（位于Blog/_config.yml）中添加內容
search: path: search.xml field: post format: html limit: 10000 文件搜索關鍵詞avatar。將準備好的頭像放置在Blog/themes/next/source/images目錄下。
文件搜索關鍵詞social。
搜索關鍵詞b2t，將圖中兩條均改為true。即可得到位于左側欄的top按鈕，可以實時顯示閱讀進度。
5.Hexo的高端頁面配置（比較靈活）
hexo添加各種功能，主要包括
- 搜索的SEO
- 閱讀量統(tǒng)計
- 訪問量統(tǒng)計
- 評論系統(tǒng)等
可以自由選擇添加，具體的設置可以參考這篇文章（
http://visugar.com/2017/08/01/20170801HexoPlugins/）。
6.其他
本文是基于Node.js的靜態(tài)博客框架Hexo，其他的博客各位如果感興趣可以參考網(wǎng)絡資源進行相應的博客搭建。下面列出了其他常見的靜態(tài)博客。
6.1靜態(tài)博客
- http://jekyllrb.com（基于ruby）
- http://gohugo.org(基于go)
- http://vuepress.vuejs.org（基于vuejs）
- http://solo.b3log.org(基于java)
在線咨詢
