在Github上搭建個人博客

02-12

環境搭建

系統環境配置

Git安裝
Node.js 安裝，推薦使用LTS版本

環境配置

Git配置

（1）Github 賬戶配置

打開Git Bash，輸入以下兩條命令(name替換成你的github用戶名，email替換成你註冊github時用的郵箱):

git config --global user.name "name"git config --global user.email "email"

配置完成後，你可以通過 git config --list 命令來查看當前的配置信息，可以看到user.name 和 user.email 已經出現在了最後兩行:

如果你發現信息輸入有誤，重新執行上面兩條命令即可。

（2）SSH密鑰配置

打開 Git Bash，確保當前位置是用戶工作目錄，也就是:~ 這個位置，執行下面的命令來生成ssh密鑰文件：

ssh-keygen -t rsa -C "email"

將email替換成你註冊github時用的郵箱。

一路回車，過程中讓你輸入東西的時候不要輸入，直接回車，使用默認即可，完後當前目錄

會多出一個名叫.ssh的文件夾，我們使用 cd .ssh 命令進入這個文件夾，裡面有兩個密鑰文件：

不帶.pub後綴的是私鑰，帶.pub後綴的是公鑰，私鑰我們要自己保存好，不要泄露出去，公鑰是可以公開分享的。

然後我們把公鑰裡面的內容全部複製出來，可以使用cat命令使密鑰內容顯示出來再複製，也可以使用文本編輯器（不推薦使用記事本）打開再複製：

再然後登陸我們前面註冊的github賬號，點擊頭像，進入 Settings，找到 SSH and GPG keys，點擊右側的 New SSH key：

最後測試一下SSH

命令行執行：

ssh -T git@github.com

第一次執行這個命令的話程序會問你是否要繼續進行連接，輸入 yes 回車就好。

然後控制台輸出：

Hi shaonianruntu! You』ve successfully authenticated, but GitHub does not provide shell access.

說明SSH密鑰配置成功！！！

創建本地 Git 倉庫

我這裡把它建在了F盤，所有文件夾名字都是可以自定義的。打開Git Bash:

cd f:mkdir git_repository

創建我們的博客文件夾：

cd git_repositorymkdir blog

進入blog文件夾：

cd blog

這是我電腦上的blog文件夾全路徑: /f/git_repository/blog

Hexo 部署

Hexo 安裝

打開Git Bash，執行下面的命令:

npm install -g hexo-cli

稍等一會兒，不要著急，會開始自動下載安裝。

安裝按成後，可能會出現這樣的兩個警告，不需要理會：

可以使用 hexo -v 命令測試是否安裝成功:

Hexo 初始化

進入blog文件夾，空白處滑鼠右鍵，點擊Git Bash Here進入命令窗口，執行初始化命令：

hexo init

等待初始化完成，最後會有一句:

INFO Start blogging with Hexo!

然後執行：

npm install

等待執行結束，無需理會警告。

初始化成功！現在就已經可以開始使用Hexo了!!!

一些插件安裝

索引生成器：npm install hexo-generator-index --save歸檔生成器：npm install hexo-generator-archive --save分類生成器：npm install hexo-generator-category --save標籤生成器：npm install hexo-generator-tag --save本地搜索: npm install hexo-generator-search --save本地化服務：npm install hexo-server --saveGit部署功能：npm install hexo-deployer-git --save渲染器：npm install hexo-renderer-marked --save渲染器：npm install hexo-renderer-stylus --save置頂功能：npm install hexo-helper-post-top --saveLatex語法支持： npm install hexo-math --save

為了方便大家直接複製，我這裡把這些指令整合如下：

npm install hexo-generator-index --savenpm install hexo-generator-archive --savenpm install hexo-generator-category --savenpm install hexo-generator-tag --savenpm install hexo-generator-search --savenpm install hexo-server --savenpm install hexo-deployer-git --savenpm install hexo-renderer-marked --savenpm install hexo-renderer-stylus --savenpm install hexo-helper-post-top --save npm install hexo-math --save

安裝完成

初始化完成後的文件夾結構是這樣的:

關於該目錄下的文件及文件夾說明，可以查看 Hexo官方文檔。

Hexo 配置

配置文件 _config.yml，具體的配置信息還是去 hexo 官方文檔看吧。

建議用專業的文本編輯器編輯該文件，不要用 Win 自帶的記事本。我用的是 Visual Studio Code。

開始寫作

Hexo官方文檔里有對於寫作的詳細介紹。

你可以執行下列命令來創建一篇新文章。

hexo new [layout] <title>

您可以在命令中指定文章的布局（layout），默認為 post，可以通過修改 _config.yml 中的 default_layout 參數來指定默認布局。一般使用默認，也就不需要加上 [layout]。

比如，我們可以使用如下命令，來創建一個名為 hello 的文章：

hexo new "hello"

之後，進入存放我們文章的文件夾(logsource_posts)，可以看到我們的hello.md已經在這了，另外還有一個hello-world.md文件，這是hexo初次安裝完成後自動生成的示例文件，這裡面寫的是一些常用hexo命令，可以刪掉這個文件。

用文本編輯器或者Markdown編輯器打開helloHexo.md就可以寫文章啦~~

我正在用的Markdown編輯器是：Yu Writer - 跨平台的 Markdown 文本編輯器

打開文件後，會看見這裡已經有一些模版內容了：

這一部分內容官方稱為 Front-matter，可以參考官方文檔補充這一部分的內容。

文章寫完後，可以在寫作軟體上預覽一下效果，減少我們修改的次數。

覺得可以後，可已經我們之前已經安裝好的 server 插件，將文章上傳到本地伺服器進行預覽：

hexo server

根據提示，在瀏覽器中輸入:

http://localhost:4000/

就可以看到最原始狀態的博客啦~

說明：同樣的Markdown語法在不同的網站上可能會顯示出不同的效果，不過沒關係，只要能在Github上顯示出我們想要的效果就行了，因為我們的目的就是把博客部署在Github上！

Hexo 主題設置

你是否覺得默認的主題有點丑，你可以在 Hexo官方主題商店或者 Github 上搜索 hexo theme 發掘你中意的主題。

我使用的是 MaterialFlow 主題。

部署博客到 Github 上

創建 Github 倉庫

倉庫名字一定要是：{github username}.http://github.io

比如我的 github 用戶名是 shaonianruntu，則倉庫名字為：http://shaonianruntu.github.io

用戶名即是Owner那裡的用戶名

我這裡因為已經創建過了，所以顯示了倉庫名顯示報錯，你們初次創建的時候是不會有報錯的。

部署配置

配置 _config.yml 文件。

翻到最下面找到 deploy 這一項，填寫：

type: gitrepo: git@github.com:{username}/{username}.github.io.gitbranch: master

舉個例子，如我這裡填寫的就是：

發布博客

命令行執行：

hexo g

然後執行：

hexo d

當控制台輸出：INFO Deploy done: git 的時候，說明項目已經成功的發布到github上，耐心等待一會兒，就可以通過訪問 {username}.http://github.io 來訪問博客了~~

更新博客

hexo new "name" 或者直接在(/source/_posts/)裡面新建.md文件

寫完Markdown文章後，執行：

hexo g -d

即可一鍵部署。

個人域名配置

域名註冊

既然網站已經建好了，那麼一個個性的域名是免不了的，否則使用 {username}.http://github.io 未免顯得太過寒磣。

至於域名的註冊，有很多方法，你可以在騰訊雲，阿里雲，GoDaddy 等網站購買。

我使用的騰訊雲。

DNS 設置

建議使用 DNSPod 來進行設置。

在 DNSPod 中進入個人控制台，選擇 域名解析， 添加域名，將上面註冊好的個人域名添加進去，然後點擊 添加記錄 添加如下3條記錄：

兩條A記錄指向的IP分別是：

192.30.252.153
192.30.252.154
CNAME記錄指向的是你的原博客地址:{username}.http://github.io

域名伺服器配置

如果你是在騰訊雲上購買的域名，那麼騰訊雲已經自動幫你設置好了DNS。

如果你在別的網站上購買的域名，那麼你需要手動修改DNS，我這裡已騰訊云為例：

點擊 DNS修改，將域名伺服器修改為 DNSPod提供的域名伺服器。

修改完成後顯示如下：

博客內設置

在博客source目錄下，新建一個CNAME文件。

編輯此文件，將你的新域名輸入進去：

然後執行 hexo g -d 重新部署。

等待一段時間後，你就可以用新域名訪問你的博客了。