博客網站

第一個自己的博客網站

程式設計師都知道要創建一個自己的個人網站，可以記錄自己學習的過程以及分享，在創建的過程中有很多難題解決感到成就感慢慢講給別人又聽不懂，個人感覺就像小黃鴨測試法，就讓我來分享個人搭建的過程吧。

本文目的

在Git Page建立免費的個人網站，通過插件和主題來寫博客

GitHub Pages是什麼？

首先你需要知道什麼是GitHub，GitHub是一個面向開源及私有軟體項目的託管平臺，因為只支持Git作為唯一的版本庫格式進行託管，故名GitHub。————百度百科

GitHub Pages是一個靜態站點託管服務，可直接從GitHub上的存儲庫獲取HTML，CSS和JavaScript文件，還可以選擇在構建過程中運行這些文件並發布網站。您可以在GitHub Pages examples集合中查看GitHub Pages網站的示例；您可以將站點託管在GitHub的github.io域或您自己的自定義域上

GitHub Pages會發布您推送到存儲庫的所有靜態文件。您可以創建自己的靜態文件，也可以使用靜態網站生成器為您構建網站。您還可以在本地或另一臺伺服器上自定義自己的構建過程。我們建議使用Jekyll，它是靜態站點生成器，具有對GitHub Pages的內置支持和簡化的構建過程。————更多關於GitHub Pages的介紹

Hexo是什麼？

Hexo 是一款簡單地、輕量地、基於Node.js的一個靜態博客框架也可以說是靜態博客網站生成器，作者是來自臺灣的Tommy Chen。

主要步驟

-hexo的初級搭建還有部署到github page上，以及個人域名的綁定.

-hexo的基本配置，更換主題

Hexo搭建步驟安裝Git

Git是目前世界上最先進的分布式版本控制系統，可以有效、高速的處理從很小到非常大的項目版本管理。也就是用來管理你的hexo博客文章，上傳到GitHub的工具。Git非常強大，我覺得建議每個人都去了解一下。廖雪峰老師的Git教程寫的非常好，大家可以了解一下。Git教程

windows：到git官網https://git-scm.com/[1]上下載,Download git,下載後會有一個Git Bash的命令行工具，以後就用這個工具來使用git。

linux：對linux來說實在是太簡單了，因為最早的git就是在linux上編寫的，只需要一行代碼

sudo apt-get install git
安裝好後，用git --version 來查看一下版本
安裝nodejs
Hexo是基於nodeJS編寫的，所以需要安裝一下nodeJs和裡面的npm工具。
windows：nodejshttp://nodejs.cn/選擇LTS版本就行了。
linux：
sudo apt-get install nodejs
sudo apt-get install npm
安裝完後，打開命令行
node -v
npm -v
檢查一下有沒有安裝成功。　　windows在git安裝完後，就可以直接使用git bash來敲命令行了，不用自帶的cmd。
安裝Hexo
前面git和nodejs安裝好後，就可以安裝hexo了，你可以先創建一個文件夾blog，然後cd到這個文件夾下（或者在這個文件夾下直接右鍵git bash打開）。
輸入命令
npm install -g hexo-cli
依舊用hexo -v查看一下版本
接著安裝hexo-deployer-git插件，該插件用於將hexo生成的靜態html文件上傳部署到Github Page上
npm install --save hexo-deployer-git
至此就全部安裝完了。
接下來初始化一下hexo
hexo init myblog
這個myblog可以自己取什麼名字都行，然後
cd myblog //進入這個myblog文件夾
npm install
新建完成後，指定文件夾目錄下有：
node_modules: 依賴包
public：存放生成的頁面
scaffolds：生成文章的一些模板
source：用來存放你的文章
themes：主題
_config.yml: 博客的配置文件 //與後面的主題配置文件類似但不要混淆~~
hexo g  //生成網站靜態文件到默認設置的 public 文件夾
hexo server //啟動本地伺服器
打開hexo的服務，在瀏覽器輸入localhost:4000就可以看到你生成的博客了。
使用ctrl+c可以把服務關掉。
這會兒你就可以看到自己的網站了，只不過我們還沒有上傳到GitHub中，接下來我為大家講解。
GitHub創建個人倉庫首先，你先要註冊一個GitHub帳戶。
註冊完登錄後，在GitHub.com中看到一個New repository，新建倉庫
創建一個和你用戶名相同的倉庫!!!!!!(這很重要!不一樣後面會報404錯誤!) 後面加.github.io，只有這樣，將來要部署到GitHub page的時候，才會被識別，也就是xxxx.github.io，其中xxx就是你註冊GitHub的用戶名。
點擊create repository。
生成SSH添加到GitHub
回到你的git bash中，
git config --global user.name "yourname"
git config --global user.email "youremail"
這裡的yourname輸入你的GitHub用戶名，youremail輸入你GitHub的郵箱。這樣GitHub才能知道你是不是對應它的帳戶。
可以用以下兩條，檢查一下你有沒有輸對
git config user.name
git config user.email
然後創建SSH,一路回車
ssh-keygen -t rsa -C "youremail"
這個時候它會告訴你已經生成了.ssh的文件夾。在你的電腦中找到這個文件夾。
ssh，簡單來講，就是一個秘鑰，其中，＿id＿rsa是你這臺電腦的私人秘鑰，不能給別人看的，＿id＿rsa.pub是公共秘鑰，可以隨便給別人看。把這個公鑰放在GitHub上，這樣當你連結GitHub自己的帳戶時，它就會根據公鑰匹配你的私鑰，當能夠相互匹配時，才能夠順利的通過git上傳你的文件到GitHub上。
而後在GitHub的setting中，找到SSH keys的設置選項，點擊New SSH key
把你的id_rsa.pub裡面的信息複製進去。
在gitbash中，查看是否成功
ssh -T [e-mail]
將hexo部署到GitHub
這一步，我們就可以將hexo和GitHub關聯起來，也就是將hexo生成的文章部署到GitHub上，打開站點配置文件 _config.yml，翻到最後，修改YourgithubName就是你的GitHub帳戶
deploy:
	type: git
	repo: https://github.com/YourgithubName/YourgithubName.github.io.git
	branch: master
這個時候需要先安裝deploy-git ，也就是部署的命令,這樣你才能用命令部署到GitHub。
npm install hexo-deployer-git --save
然後
hexo clean //清除了你之前生成的東西，可以不加
hexo generate //生成靜態文章  hexo g縮寫
hexo deploy   //部署文章      hexo d縮寫
注意deploy時可能要你輸入username和password。
部署成功了，過一會兒就可以在http://yourname.github.io 這個網站看到你的博客了
使用個人域名
現在你的個人網站的地址是 yourname.github.io，如果覺得這個網址逼格不太夠，這就需要你設置個人域名了。但是需要花錢。
註冊一個騰訊雲帳戶,在騰訊雲上買一個域名，我買的是 andjiaz.com http://www.andjiaz.com[2]，各個後綴的價格不太一樣，比如最廣泛的.com就比較貴，看個人喜好咯。
你需要先去進行實名認證,然後在域名控制臺中，看到你購買的域名。
點解析進去，添加解析。
解析線路選擇默認，記錄類型選擇CNAME，主機記錄選擇*，記錄值填寫yourname.github.io其他一切默認就行。
登錄GitHub，進入之前創建的倉庫，點擊settings，設置Custom domain，輸入你的域名andjiaz.com
然後在你的博客文件source中創建一個名為CNAME文件，不要後綴。寫上你的域名。
最後，在gitbash中，輸入
hexo clean
hexo g
hexo d
過不了多久，再打開你的瀏覽器，輸入你自己的域名，就可以看到搭建的網站啦！
接下來你就可以正式開始寫文章了。
然後在source/_post中打開markdown文件，就可以開始編輯了。當你寫完的時候，再
hexo clean
hexo g
hexo d
稍等片刻，不要著急，一般10分鐘，我因為太著急以為程序錯誤導致修改別的報錯，不久就可以看到更新了。
Hexo主題配置
進入 Hexo 官網主題，選擇自己心儀的主題，點擊進入（如博主點擊 fluid 主題），可以看到主題裡面有安裝和部署的介紹或文檔，很方便
進入 myblog 文件夾下的 themes 目錄（如：E:\myblog\themes），安裝 fluid 主題，這裡我使用的是直接下載下來解壓到themes文件中！！！！注意：一定要把文件名改成fluid，之後在myblog/_config.yml中將themes更換為fluid
theme: fluid
回到 myblog 目錄，輸入如下命令生成文件啟動本地服務，查看效果
hexo g
hexo s --debug //在本地預覽完成後Ctrl+c結束伺服器，並運行hexo d，如果報錯解決錯誤再上傳。
hexo d
配置說明
在 Hexo 目錄下（也就是myblog）有一個名為 _config.yml 的配置文件（E:\myblog），同時在下載的主題 fluid 目錄下也有一個名為 _config.yml 的配置文件（E:\myblog\themes\fluid），大家不要搞混淆了，在 Hexo 目錄下（myblog）下的 _config.yml 的配置文件是控制站點，比如網站的標題、圖標、關鍵字、作者、語言等；而在 themes 目錄下的 _config.yml 的配置文件顧名思義是控制主題的配置、包括文章、樣式、顯示、連結、圖片等，這個博主就不多說了哈，每個主題作者都提供了非常詳細的主題配置文檔
個人網站：http://www.andjiaz.com[3]
參考資料[1]
Git官網: https://git-scm.com/
[2]
andjiaz: http://www.andjiaz.com
[3]
andjiaz: http://www.andjiaz.com