Github pages + Hexo 技術(shù)

使用Hexo建立博客站點(diǎn)前提：要有 Git 和 Node.js 環(huán)境

• 一、基礎(chǔ) hexo安裝：

• 1、安裝hexo
  下載hexo hexo實(shí)在node.js環(huán)境下的，所以首先就需要安裝node.jshttps://nodejs.org/en/（安裝方法可以自己下載node.js點(diǎn)擊默認(rèn)安裝就好了）
  node好了之后，進(jìn)入命令控制器（cmd 或者git base 等均可）開(kāi)始使用命令建立hexo：

npm install hexo -g （安裝hexo的命令方法）

• 2、新建bolg文件
  hexo好了之后，開(kāi)始建立自己blog站點(diǎn)（即生成bolg目錄）放在自己電腦的那個(gè)地方。
  已我的為例 ：我放在F盤(pán)根目錄 gitblog F:\gitblog

hexo init f:\gitblog(初始化創(chuàng)建目錄blog文件夾)

• 3、生成網(wǎng)站
  將gitblog文件生成靜態(tài)網(wǎng)站

hexo g （或 hexo generate）
(初始化blog靜態(tài)網(wǎng)站頁(yè)面)

• 4、啟動(dòng)服務(wù)
  生成靜態(tài)網(wǎng)站后，啟動(dòng)本地服務(wù)，訪問(wèn)本地blog

   hexo server 或 hexo s

輸入localhost:4000（或127.0.0.1:4000）訪問(wèn)

關(guān)掉服務(wù) ctrl+c
Tip：?jiǎn)?dòng)服務(wù)，必須在bolg目錄下才可以用，所以通常需要我們先通過(guò)命令找到blog的目錄，然后再啟動(dòng)服務(wù)。 如我的操作：
①先找到目錄，打開(kāi)命令輸入 cd f:\gitblog
②然后啟動(dòng)服務(wù) 輸入 hexo s

二、hexo 新建和配置文章

1、配置hexo 上面都是hexo生成默認(rèn)站點(diǎn)，接下來(lái)我們就要改成我們自己的文件，配置站點(diǎn)信息，新建博客等。
配置站點(diǎn)信息 ： 打開(kāi)_config.yml文件 修改里面的信息（如網(wǎng)站標(biāo)題，網(wǎng)站描述等）
參照官方文檔:https://hexo.io/zh-cn/docs/configuration.html
可以打開(kāi)hexo網(wǎng)站：https://hexo.io 查看hexo使用文檔 語(yǔ)言可以切換成中文查看
2、新建bolg

   hexo new  "我的第一篇博客"

之后會(huì)在bolg目錄的 source_posts 文件中生成一個(gè).md文件

新建好的新文章文件

3、編寫(xiě)新建的博客，用marckdown工具打開(kāi)新建的md文件（marckdown文件）
-->修改文章標(biāo)題title：可以修改新建的遍體，這將顯示在網(wǎng)頁(yè)上
-->設(shè)置文章標(biāo)簽：

修改新建文章的標(biāo)題時(shí)間和標(biāo)簽

-->設(shè)置文章分類：categories
后面加自己的分類就行，注意后面跟的不是同級(jí)關(guān)系，是父子關(guān)系，如圖

寫(xiě)文章分類的寫(xiě)法

分類寫(xiě)好在文章的樣子

Tip:因?yàn)閏ategories是同級(jí)關(guān)系，要?jiǎng)?chuàng)建其他大類，只需要在下面一篇文章的categories下寫(xiě)出新的分類就好。

文章分類兩級(jí)寫(xiě)法

分類效果

4、設(shè)置博客的一些默認(rèn)模版參數(shù)
scaffolds ->
page:網(wǎng)站界面的模版
post:新建文章的模版
新建文章 -->新建文章 hexo new 新的文章

新建文章 hexo new 新的文章

新建頁(yè)面page
如 關(guān)于我 的頁(yè)面（站點(diǎn)默認(rèn)是沒(méi)有這個(gè)頁(yè)面的，需要我們自己去創(chuàng)建）

hexo new page 新建頁(yè)面
如 hexo new page 關(guān)于我
新建一個(gè) 關(guān)于我的界面page

hexo new page about 新建了一個(gè)about的頁(yè)面，并放在--source/about目錄下

新建page的md文件

5、生成靜態(tài)文件
其實(shí)到這一步，差不多你就掌握了怎么去創(chuàng)建和修改我們的博客了，接下我們要把我們寫(xiě)的文章，生成靜態(tài)文件，達(dá)到可用啟用服務(wù)，用瀏覽器來(lái)訪問(wèn)。
生成靜態(tài)文件語(yǔ)法：

hexo generate 或 hexo g

hexo g 生成靜態(tài)文件

6、發(fā)布開(kāi)啟服務(wù)：靜態(tài)網(wǎng)站發(fā)布出去后，開(kāi)啟服務(wù)，我們就可以在瀏覽器里面訪問(wèn)了:localhost:4000

       開(kāi)啟服務(wù)語(yǔ)法： hexo s

在瀏覽器輸入localhost:4000測(cè)試

-->到此為止，我們博客在本地就完全做好了，階下來(lái)，我們只要去github發(fā)布就好了。

上面流程開(kāi)下來(lái)，有點(diǎn)亂，重新把寫(xiě)文章的操作代碼整理如下
新建文章 ： hexo new "新文章名"
生成靜態(tài)文件 ： hexo g
發(fā)布到github ： hexo d (下面將詳細(xì)介紹這條命令)

7、文件上傳到github上，供訪問(wèn)，使用的是github pagers。
我們?cè)陔娔X先需要讓hexo安裝一個(gè)deployer ，直接在命令行執(zhí)行:
npm install hexo-deployer-git --save

然后按一下步驟：
1)首先我們要先創(chuàng)建一個(gè)github帳號(hào)，（https://github.com/）
注冊(cè)跟其他網(wǎng)站注冊(cè)一樣的，這里沒(méi)看懂的，可以私信或者底下評(píng)論，我會(huì)詳細(xì)回復(fù)你。
2)github帳號(hào)有了后，登錄然后創(chuàng)建我們的新的git項(xiàng)目，
項(xiàng)目名為 ：你的git帳號(hào)名+github.io
（必須用自己的git帳號(hào)開(kāi)頭，不能修改的）

github建立項(xiàng)目的過(guò)程

3)配置github 。
項(xiàng)目創(chuàng)建好了后，我們后得到一個(gè)SSH值，復(fù)制下來(lái)，要回到我們創(chuàng)建的本地文件中配置進(jìn)去，以便我們以后的提交。
在創(chuàng)建本地hexo文件中找到config，如圖。

項(xiàng)目配置文件

然后加入這么一段代碼，來(lái)配置我們的hexo 和 git 。

deploy:
type: git  #部署類型，這里使用git
repo: git@github.com:d**********v/dengdailuv.github.io.git #你從github復(fù)制下來(lái)的的SSH
branch: master  #部署分支，一般用master主分支

config配置文件添加處

做完上面步驟，我們就可以嘗試使用 hexo d 提交我們的代碼的了

提交語(yǔ)法  hexo  d

提交本地文件

沒(méi)有報(bào)錯(cuò)，就意味著你的代碼提交成功了。
這個(gè)時(shí)候，我們就可以用
你的git帳號(hào)名+github.io
在有網(wǎng)絡(luò)的地方用瀏覽器打開(kāi)了。如
https://dengdailuv.github.io/

文件上線瀏覽

三、 配置主題

有沒(méi)有發(fā)現(xiàn)我的博客跟你的博客不一樣不，那是因?yàn)槲沂褂昧薶exo的next主題。
hexo默認(rèn)的是landscape這個(gè)主題，我們要更換，則需要我們自己去hexo的主題下載 。
https://hexo.io/themes/
選擇你喜歡的，然后去下載下來(lái)，下載地址一般是主題下面的by **** 點(diǎn)進(jìn)去，一般會(huì)有文檔或者引導(dǎo)主題使用操作的介紹，然后在根據(jù)它的文檔介紹修改就好了。

主題下載地址

1、下載hexo 主題；
2、配置主題，下載好的文件，解壓放進(jìn)我們的本地項(xiàng)目的theme中（里面有個(gè)默認(rèn)的主題landscape），下載的解壓只保留主題的名字。

主題下載放置處

3、在項(xiàng)目的config文件配置中配置：

主題配置

一開(kāi)始這里的是landscape，修改成你下載的主題，其實(shí)這個(gè)時(shí)候你就可以 生成靜態(tài)文件，在發(fā)布出去出去看看樣子了。
一般還需要自己在按照文檔修改成自己想要的樣子，主題文檔會(huì)有很清楚的書(shū)明，按照他的來(lái)就可以了。
因?yàn)槊恳粋€(gè)主題的修改操作可能并不相同，我這里就不在過(guò)多的介紹，而且主題一般會(huì)有比較詳細(xì)的使用說(shuō)明，按照文檔修改就行了。
ps 我用的是next主題，自己感覺(jué)還可以，分享給你們

https://github.com/iissnan/hexo-theme-next  主題下載
http://theme-next.iissnan.com/getting-started.html    使用文檔

對(duì)于這個(gè)主題的使用或者其他主題使用不同的，期待你們?cè)谠u(píng)論區(qū)評(píng)論，我會(huì)告訴你我所知道了，我們一起成長(zhǎng)，包括之前的步驟不太明白了，歡迎指出，我會(huì)盡力幫大家搭建出自己的博客，加油一起成長(zhǎng)。

-----列出hexo常用的命令流程

cd  d:\gitblog      找到我們本地文件（如我的D盤(pán)的gitblog文件）所在的位置（這個(gè)也是我們hexo安裝的位置）
這個(gè)操作是必須的，每個(gè)命令都在這里開(kāi)始的
hexo new 文章              新建文章
hexo clead                  清楚操作
hexo g                      生成本地靜態(tài)文件
hexo s                      啟動(dòng)本地服務(wù)（這個(gè)可以省略，如不想本地調(diào)試的話）
hexo d                      上傳git  訪問(wèn)

-----完成這個(gè)系列過(guò)程，你就新建好了文章，并可以訪問(wèn)
評(píng)論區(qū)評(píng)論你們的疑惑，我們一起用好hexo搭建博客，我自己搭建也用了好久摸索，可是我希望我能幫你們省下這一點(diǎn)時(shí)間。