一、前言
工作之后一直有寫作的沖動礼仗，想把自己的一些想法記錄下來，但可能是天生自帶的強(qiáng)迫癥逻悠，一直沒有好的平臺，所以一直沒有開始。之前看到過一些技術(shù)人員有自己的博客趋距，而且是那種私人的博客，覺得非常的炫酷孩擂，從此就一直想要說自己也弄一個(gè)狼渊，其實(shí)關(guān)于博客的平臺有很多，很多人也喜歡在一些第三方平臺進(jìn)行寫作类垦，像是簡書狈邑、CSDN、知乎...但是有一個(gè)自己博客的想法一直在我腦海蚤认，這不剛好自己現(xiàn)在有時(shí)間了米苹，就開始鼓搗起來了扮匠。
關(guān)于這篇博客
寫這篇博客主要是：
第一是對整個(gè)網(wǎng)站搭建過程進(jìn)行記錄秘噪，幫助自己鞏固和總結(jié)一下
第二是搭建過程中也遇到了不少的坑和問題，將這些問題進(jìn)行總結(jié)一下计雌，幫助其他人少犯錯(cuò)。
額外想說的一點(diǎn)：
這個(gè)雖然說是教程训唱，但是隨著技術(shù)的更新褥蚯，肯定會有部分的內(nèi)容沒有及時(shí)更新逐漸淘汰，所以我會盡量在寫的過程中提供相關(guān)的官方文檔鏈接况增，一般只要這個(gè)技術(shù)沒有被完全淘汰赞庶，他的官網(wǎng)文檔總是會進(jìn)行更新的，所以如果我的教程中有哪些地方你覺得可能不太準(zhǔn)確巡通，可以通過其中的官網(wǎng)鏈接進(jìn)行查看尘执。
二、教程部分
搭建博客網(wǎng)站是一個(gè)小的項(xiàng)目工程宴凉，所以不要想著一步成功誊锭，中間可能還會遇到各種Bug,可以將這個(gè)項(xiàng)目分為多個(gè)步驟進(jìn)行，接下來我們開始第一部分（博客網(wǎng)站框架搭建）：
- 了解Hexo
- 安裝Nodejs環(huán)境
- 安裝Hexo
- 搭建你的一個(gè)博客平臺
- 開始你的第一篇博客文章
開始準(zhǔn)備工作
- 首先你的電腦要安裝了Git（版本控制工具）,不會的可以點(diǎn)擊Git官網(wǎng)進(jìn)行下載安裝
- 安裝nodejs環(huán)境弥锄，可以去Node官網(wǎng)進(jìn)行下載即可,這樣你就擁有了NPM包管理工具丧靡，就可以安裝hexo啦！
- 你需要注冊一個(gè)GitHub的賬號籽暇，因?yàn)槟阈枰褂?a target="_blank" rel="nofollow">GitHub Pages
- 貌似目前就需要這些温治。。戒悠。
1.Hexo介紹
Hexo是基于NodeJs的靜態(tài)博客框架熬荆，簡單、輕量绸狐，其生成的靜態(tài)網(wǎng)頁可以托管在Github上卤恳。
- 超快速度
- 支持MarkDown
- 一件部署
- 豐富的插件
2.環(huán)境準(zhǔn)備
2.1 安裝node.js
去nodejs官網(wǎng)下載對應(yīng)系統(tǒng)的安裝包，按照提示進(jìn)行安裝即可寒矿⊥涣眨可以使用以下命令檢驗(yàn)是否安裝成功：
$ node -v
如果安裝成功將會顯示你安裝的node版本信息。
2.2 安裝Hexo
在你安裝好node之后你就可以使用npm安裝hexo符相，目前由于部分原因拆融，npm并不是所有人都可以使用，如果不行的話可以使用淘寶鏡像操作沒有很大的不同啊终，把npm改成cnpm即可,安裝Hexo的主要流程可以通過Hexo文檔進(jìn)行查看镜豹，官方文檔都會持續(xù)更新。
$ npm install hexo-cli -g
3.使用Hexo搭建你的第一個(gè)博客
3.1 創(chuàng)建博客目錄
$ hexo init yourblogfilename
$ cd youeblogfilename
$ npm install
這里三個(gè)步驟分別是：
- 初始化你的博客的文件目錄
- 進(jìn)入到你的博客文件目錄中
- 安裝npm
這里的
yourblogfilename就是你本地博客的文件夾蓝牲，這個(gè)名字你可以自己隨便取逛艰。
3.2 生成靜態(tài)頁面
$ hexo clean
$ hexo g
g表示generate
3.3 運(yùn)行
$ hexo s
s表示server
這個(gè)時(shí)候你打開瀏覽器，輸入 http://localhost:4000/就可以看到效果啦搞旭！
這個(gè)時(shí)候你應(yīng)該是有一點(diǎn)小興奮的吧散怖！終于看到了一個(gè)博客網(wǎng)站的大致雛形了菇绵，接下來你就可以自己嘗試發(fā)一篇文章試試！
4.你的第一篇博客文章
4.1 執(zhí)行命令
$ hexo new firstblog
這個(gè)時(shí)候在你的博客文件目錄的source/_posts下會生成一個(gè)firstblog.md文件镇眷，這個(gè)是一個(gè)Markdown文件，相信很多編程人員都知道欠动，編寫Markdown文檔也是技術(shù)人員的基本功之一永乌，所以你可以打開這個(gè)文件，隨便輸入一些文字，保存關(guān)閉即可。這將是你的第一篇博客文章，使用以下命令查看生成的效果：
$ hexo clean
$ hexo g
$ hexo s
打開瀏覽器，輸入 http://localhost:4000/查看效果榄融。
4.2 更直接的方法
在source/_post/下新建一個(gè).md文件也可以
以上，你已經(jīng)完成了一個(gè)博客網(wǎng)站的基本搭建臂寝，可以自己查看自己的新建并且發(fā)布的的博客文章沈自。但是它與我們所設(shè)想的還有一段距離呆躲，所以接下來我們就要開始進(jìn)行以下操作：
- 配置站點(diǎn)信息
- 更換主題
- 配置主題信息
- 部署到Github
5.配置站點(diǎn)信息
網(wǎng)站的設(shè)置大部分都在_config.yaml文件中，詳細(xì)配置可以查看官方文檔
下面列舉一些常用配置：
-
title-> 網(wǎng)站標(biāo)題 -
subtitle-> 網(wǎng)站副標(biāo)題 -
description-> 網(wǎng)站描述 -
author-> 你的名字 -
langiage-> 網(wǎng)站使用的語言
??注意：在配置時(shí)捶索，需要加上冒號:,冒號后面要加一個(gè)英文的空格插掂，例如：
title: Kevin wan
6.換一個(gè)你喜歡的主題
配置好上面的站點(diǎn)信息以及發(fā)布了自己的博客文章之后，是不是發(fā)現(xiàn)Hexo這個(gè)自帶的主題有點(diǎn)丑呢腥例？沒關(guān)系辅甥，Hexo中有很多主題，可以在Hexo官網(wǎng)查看燎竖。我自己使用的是Next主題,個(gè)人還是比較推薦的璃弄。
6.1 下載主題資源
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
當(dāng)然，這里我使用的Next主題作為例子构回，你也可以使用其他的主題夏块，只需要將clone后面的鏈接換成你的主題的URL即可。
6.2 使用下載主題
在站點(diǎn)配置文件纤掸，也就是_config.yaml中脐供，配置theme
next是我使用的主題名稱，具體的可以通過主題文檔查看你的主題名稱
6.3 主題其他部分配置
到這一步你已經(jīng)可以看到一個(gè)比較漂亮的博客網(wǎng)站了借跪，一個(gè)你喜歡的風(fēng)格的網(wǎng)站政己。當(dāng)然，還有一些細(xì)節(jié)的部分需要我們進(jìn)行配置掏愁，這個(gè)時(shí)候可以根據(jù)主題的配置文檔進(jìn)行主題配置歇由，一般是在theme/{theme}/_config.yaml主題配置文件下進(jìn)行配置卵牍，Next主題的可以查看Next文檔，詳細(xì)的配置步驟這里就不多說了沦泌，可以按照自己的喜好進(jìn)行配置辽慕。
在配置完之后怎么查看自己是否配置成功呢？可以使用完成的調(diào)試命令進(jìn)行查看：
$ hexo clean
$ hexo g
$ s
這個(gè)時(shí)候本地瀏覽器訪問http://localhost:4000/即可
此時(shí)赦肃，你已經(jīng)完成了第二個(gè)部分溅蛉，配置好了你的站點(diǎn)信息，選擇了自己喜歡的主題和配置了相應(yīng)的主題設(shè)置他宛，但是目前這個(gè)網(wǎng)站僅限于我們自己本地進(jìn)行瀏覽船侧，無法讓別人看到，這就需要我們將我們的網(wǎng)站部署到Github上面去厅各，至于什么是GitHub镜撩，知道的可以自己搜索一下，作為一名開發(fā)人員队塘，GitHub肯定是要了解的袁梗，廢話不多少，接著操作：
- 注冊Github賬號
- 創(chuàng)建倉庫（repo）
- 網(wǎng)站配置
- 進(jìn)行部署
7.部署到GitHub
7.1 注冊GitHub賬號
7.2 創(chuàng)建一個(gè)xxx.github.io的倉庫
這里的xxx是你的用戶名憔古，例如我的用戶名是Xiankai-Wan那么我的倉庫就命名為Xiankai-Wan.github.io
7.3 安裝hexo-deployer-git
$ npm install hexo-deployer-git --save
7.4站點(diǎn)配置Git
在站點(diǎn)而不是主題的_config.yaml中配置deploy
deploy:
type: git
repo: <repository url>
branch: [branch]
-
type這里默認(rèn)為git -
repo后面是你的這個(gè)repo的URL遮怜，可以在Github上面找到你的repo的地址 -
branch表示分支，可以不填鸿市，一般為master - 還是那句話锯梁，冒號后面要有空格
7.5 部署
終端輸入：
$ hexo d
d 就是 deploy
將網(wǎng)站部署到GitHub已經(jīng)完成了，這一步還是比較簡單的焰情，只需要一些基本的操作就可以了陌凳，這個(gè)時(shí)候你就可以通過xxx.github.io訪問自己的博客網(wǎng)站啦！
接下來我們需要配置一些其他的信息内舟，例如每一個(gè)博客文章中都有標(biāo)簽合敦，那這個(gè)是怎么來的呢？還有我們可以對每一篇博客文章進(jìn)行分類验游，這個(gè)也是需要我們手動配置一下的充岛，所以接下來我們開始：
- 配置標(biāo)簽頁
- 配置分類頁
8.創(chuàng)建標(biāo)簽頁
8.1 確認(rèn)相關(guān)信息
- 你需要確認(rèn)站點(diǎn)配置文件里面有：
tag_dir: tags
- 確認(rèn)主題配置文件有：
tags: tags
8.2 新建Tags頁面
$ hexo new page tags
這個(gè)時(shí)候會在source/下面生成tags/index.md文件
8.3 配置標(biāo)簽頁面
打開tags/index.md,配置如下：
title: tags
date: 2017-10-20 06:49:50
type: "tags"
comments: false
date可以保持系統(tǒng)生成的時(shí)間，其他部分不要亂改
8.4 在文章中添加Tags
在完成以上操作之后批狱，你就可以在自己的博客文章xx.md文件中添加：
tags:
- Tag1
- Tag2
- Tag3
多個(gè)Tag可以按照上面的格式進(jìn)行添加裸准。
之后你的博客文章文件頭部類似于：
title: TagEditText
date: 2016-11-19 10:44:25
tags:
- Tag1
- Tag2
- Tag3
9.創(chuàng)建分類頁
9.1 確認(rèn)相關(guān)信息
- 你需要確認(rèn)站點(diǎn)配置文件里面有：
category_dir: categories
- 確認(rèn)主題配置文件有：
categories: /categories
9.2 新建分類頁面
$ hexo new page categories
這個(gè)時(shí)候會在source目錄下面生成categories/index.md文件展东。
9.3 配置分類頁面
打開categories/index.md赔硫，配置如下：
title: categories
date: 2015-10-20 06:49:50
type: "categories"
comments: false
date 可以保持系統(tǒng)生成的時(shí)間，其他不要隨意更改
9.4 在文章中添加categories
在完成以上操作之后盐肃，你就可以在自己的博客文章xx.md文件中添加：
categories:
- cate
之后你的博客文章文件頭部類似于：
title: TagEditText
date: 2016-11-19 10:44:25
categories:
- cate
三爪膊、總結(jié)
以上权悟，就是整個(gè)博客網(wǎng)站的基本搭建過程，這個(gè)時(shí)候你已經(jīng)可以通過自己新建文件然后上傳部署到自己的博客上面了推盛，每次編輯完成之后可以使用以下三個(gè)命令進(jìn)行查看：
$ hexo clean
$ hexo g
$hexo d
也可以使用：
$ hexo s
進(jìn)行本地測試峦阁，測試完成之后，在上傳到Github也可以耘成。
關(guān)于站點(diǎn)和主題的其他配置榔昔，大部分都可以通過官方文檔進(jìn)行配置，對于其他擴(kuò)展應(yīng)用例如統(tǒng)計(jì)瀏覽量瘪菌、加入評論系統(tǒng)等等撒会，后期我會繼續(xù)總結(jié)發(fā)帖分享。
