hexo＋github我的博客搭建

首先要了解一下咱們搭建博客要用到的框架。Hexo是高效的靜態站點生成框架，它基於Node.js。經過Hexo，你能夠直接使用Markdown語法來撰寫博客。相信不少小夥伴寫工程都寫過README.md文件吧，對，就是這個格式的！寫完後只需兩三條命令便可將生成的網頁上傳到你的github上，而後別人就能夠看到你的網頁啦。是否是很簡單？你無需關心網頁源代碼的具體細節，你只須要用心寫好你的博客內容就行。

安裝Node.js

---

首先下載最新版Node.js，我這裏給的是64位的。

安裝選項所有默認，一路點擊Next。

最後安裝好以後，按Win+R打開命令提示符，輸入node -v和npm -v，若是出現版本號，那麼就安裝成功了。

安裝Git

---

爲了把本地的網頁文件上傳到github上面去，咱們須要用到分佈式版本控制工具————Git[下載地址]。

安裝選項仍是所有默認，只不過最後一步添加路徑時選擇Use Git from the Windows Command Prompt，這樣咱們就能夠直接在命令提示符裏打開git了。

安裝完成後在命令提示符中輸入git --version驗證是否安裝成功。

註冊Github帳號

---

接下來就去註冊一個github帳號，用來存放咱們的網站。大多數小夥伴應該都有了吧，做爲一個合格的程序猿（媛）仍是要有一個的。

打開https://github.com/，新建一個項目，以下所示：

而後以下圖所示，輸入本身的項目名字，後面必定要加.github.io後綴，README初始化也要勾上。

而後項目就建成了，點擊Settings，向下拉到最後有個GitHub Pages，點擊Choose a theme選擇一個主題。而後等一下子，再回到GitHub Pages，會變成下面這樣：

點擊那個連接，就會出現本身的網頁啦，效果以下：

安裝Hexo

---

在合適的地方新建一個文件夾，用來存放本身的博客文件，好比個人博客文件都存放在D:\study\program\blog目錄下。

在該目錄下右鍵點擊Git Bash Here，打開git的控制檯窗口，之後咱們全部的操做都在git控制檯進行，就不要用Windows自帶的控制檯了。

定位到該目錄下，輸入npm install hexo-cli -g安裝Hexo。會有幾個報錯，無視它就行。

而後輸入npm install hexo --save繼續安裝。

安裝完後輸入hexo -v驗證是否安裝成功。

而後就要初始化咱們的網站，輸入hexo init初始化文件夾，接着輸入npm install安裝必備的組件。

這樣本地的網站配置也弄好啦，輸入hexo g生成靜態網頁，而後輸入hexo s打開本地服務器，而後瀏覽器打開http://localhost:4000/，就能夠看到咱們的博客啦，效果以下：

按ctrl+c關閉本地服務器。

鏈接Github與本地

---

首先右鍵打開git bash，而後輸入下面命令：

1 2	git config --global user.name "godweiyang" git config --global user.email "792321264@qq.com"

 

用戶名和郵箱根據你註冊github的信息自行修改。

而後生成密鑰SSH key：

1	ssh-keygen -t rsa -C "792321264@qq.com"

 

輸入eval "$(ssh-agent -s)"，添加密鑰到ssh-agent。

再輸入ssh-add ~/.ssh/id_rsa，添加生成的SSH key到ssh-agent。

打開github，在頭像下面點擊settings，再點擊SSH and GPG keys，新建一個SSH，名字隨便。

打開C:\Users\Administrator\.ssh\id_rsa.pub，注意是隱藏文件夾，將其中的內容複製到新建的SSH中。

輸入ssh -T git@github.com，若是以下圖所示，出現你的用戶名，那就成功了。

打開博客根目錄下的_config.yml文件，這是博客的配置文件，在這裏你能夠修改與博客相關的各類信息。

修改最後一行的配置：

1 2 3 4

deploy: type: git repository: https://github.com/godweiyang/godweiyang.github.io branch: master

 

repository修改成你本身的github項目地址。不過你這裏看到的可能與我有點不同，由於我已經修改過主題了，因此這一步先不用管，換完主題以後記得回來修改！

寫文章、發佈文章

---

首先在博客根目錄下右鍵打開git，安裝一個擴展npm install hexo-deployer-git --save。

而後輸入hexo new post "article title"，新建一篇文章。

而後打開D:\study\program\blog\source\_posts的目錄，能夠發現下面多了一個文件夾和一個.md文件，一個用來存放你的圖片等數據，另外一個就是你的文章文件啦。

編寫完markdown文件後，根目錄下輸入hexo g生成靜態網頁，而後輸入hexo s能夠本地預覽效果，最後輸入hexo d上傳到github上。這時打開你的github.io主頁就能看到發佈的文章啦。

綁定域名

---

如今默認的域名仍是xxx.github.io，是否是很沒有牌面？想不想也像我同樣弄一個專屬域名呢，首先你得購買一個域名，xx雲都能買，看你我的喜愛了。

以個人百度云爲例，以下圖所示，添加兩條解析記錄：

而後打開你的github博客項目，點擊settings，拉到下面Custom domain處，填上你本身的域名，保存：

這時候你的項目根目錄應該會出現一個名爲CNAME的文件了。若是沒有的話，打開你本地博客/source目錄，個人是D:\study\program\blog\source，新建CNAME文件，注意沒有後綴。而後在裏面寫上你的域名，保存。最後運行hexo g、hexo d上傳到github。

更換主題

---

網上大多數主題都是github排名第一的Next主題，可是我我的不是很喜歡，我更喜歡beantech主題，地址在傳送門。

首先要注意的是，這個github項目不只包含了主題文件，還包含了hexo的各類文件。

因此首先下載下來這個項目，而後推薦將下圖全部文件所有替換你本來博客根目錄下的文件：

而後運行hexo clean清空全部生成的網頁緩存，hexo g、hexo d。這時候新的主題網頁就生成好了，博客根目錄的狀況應該大體以下：

博客目錄構成介紹

---

從上圖能夠看出，博客的目錄結構以下：

1 2 3 4 5 6 7 8 9 10

- node_modules - public - scaffolds - source - _posts - about - archive - img - tags - themes

 

node_modules是node.js各類庫的目錄，public是生成的網頁文件目錄，scaffolds裏面就三個文件，存儲着新文章和新頁面的初始設置，source是咱們最經常使用到的一個目錄，裏面存放着文章、各種頁面、圖像等文件，themes存放着主題文件，通常也用不到。

咱們平時寫文章只須要關注source/_posts這個文件夾就好了。

個性化設置及bug處理

---

首先打開_config.yml，根據本身需求配置，具體不說了，有註釋。

修復文檔分類bug

這個主題文檔分類功能有個bug，一直沒有獲得解決，直到最近，我才發現是源文件的單詞拼錯了。。。

打開D:\study\program\blog\scaffolds\post.md，單詞catagories改成categories。

添加暢言評論插件

主題自帶了多說評論插件，可是多說已經關閉了，因此我換成了暢言評論插件。

首先你得註冊一個暢言帳號，地址。
而後打開以下頁面，複製該段代碼：

打開D:\study\program\blog\themes\beantech\layout\post.ejs，將代碼粘貼到以下位置：

而後從新生成一下網頁，能夠看到效果圖以下：

更多插件例如熱評話題之類的，能夠自行在暢言後臺找到代碼添加。

添加圖片放大功能

首先下載zooming.js文件地址，保存在D:\study\program\blog\themes\beantech\source\js目錄下。

打開D:\study\program\blog\themes\beantech\layout\post.ejs，在最下方粘貼以下代碼：

1	<script type="text/javascript" src="/js/zooming.js"></script>

 

而後文章裏的圖片就能夠單擊全屏啦。

添加數學公式顯示

打開D:\study\program\blog\themes\beantech\layout\post.ejs，在最下方粘貼以下代碼：

1	<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>

 

因爲markdown語法與mathjax語法存在衝突，因此還須要修改源文件。

打開D:\study\program\blog\node_modules\marked\lib\marked.js
escape:處替換成：

1	escape: /^\\([ `*\[\]()#$+\-.!_>])/

 

em:處替換成：

1	em: /^ \*((?:\*\*|[\s\S])+?)\*(?!\*)/

 

這時在文章裏寫數學公式基本沒有問題了，可是要注意：
數學公式中若是出現了連續兩個{，中間必定要加空格！

舉個例子:
行內公式：y=f(x)
代碼：

1	\\(y = f(x)\\)

 

行間公式：

y=fg1(x)

代碼：

1	\\[y = {f _{ {g_1}}}(x)\\]

 

注意上面花括號之間有空格！

添加留言板

在D:\study\program\blog\themes\beantech\layout中新建bbs.ejs，文件內容以下：

1 2 3 4 5 6 7 8 9 10 11 12

--- layout: page --- <style type="text/css"> header.intro-header{ background-position: right; } </style> <!-- Chinese Version --> <div class="zh post-container"> <%- page.content %> </div>

 

而後在D:\study\program\blog\source中新建\bbs文件夾，裏面在新建index.md文件，內容以下：

1 2 3 4 5 6 7 8 9

--- layout: "bbs" title: "BBS" date: 2017-09-19 12:48:33 description: "歡迎交換友鏈，一塊兒交流學習！" header-img: "img/header_img/home-bg-2-dark.png" comments: true --- 此處替換爲你的暢言評論代碼~~~

 

添加置頂功能

運行以下兩條命令安裝置頂插件：

1 2	npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top --save

 

而後打開D:\study\program\blog\themes\beantech\layout\index.ejs，在以下位置添加代碼：

1 2 3 4 5

<% if (post.top) {%> <i class="fa fa-thumb-tack"></i> <font color=7D26CD>置頂</font> <span class="post-meta-divider">|</span> <%}%>

 

而後在你想置頂的文章md文件裏，添加以下配置選項：

1

top: true

 

添加網易雲音樂BGM

寫文章的時候，想插入一段BGM怎麼辦？

首先打開網易雲網頁版，找到想聽的歌曲，而後點擊生成外鏈：

複製以下代碼：

粘貼到文章裏就好了，爲了美觀，設置一下居中，具體代碼以下：

1	< div align="middle">這裏粘貼剛剛複製的代碼</div>

 

添加訪客人數統計和字數統計

咱們使用一個國外的流量統計網站：gostats.com，首先註冊一下。

而後本身添加網站地址，過程就不詳細說了，而後點擊Get counter code，選擇一個本身喜歡的風格。
以下圖所示，選擇一個樣式，選擇HTML，生成代碼：

複製這段代碼到D:\study\program\blog\themes\beantech\layout\_partial\footer.ejs，具體位置以下：

默認的代碼和我圖中不同，由於我不想點擊圖片跳轉到它統計網站的連接，能夠模仿個人自行修改。

字數統計首先安裝插件

1	npm i -- save hexo-wordcount

 

而後打開D:\study\program\blog\themes\beantech\layout\_partial\footer.ejs，添加以下代碼：

1	<span class="post-count"><%= totalcount(site) %> words altogether</span>

 

具體位置見上圖。

一些注意事項

---

首先解釋一下文章開頭的配置，以下圖所示：

1 2 3 4 5 6 7 8

title: 文章標題 catalog: 是否顯示段落目錄 date: 文章日期 subtitle: 子標題 header-img: 頂部背景圖片 top: 是否置頂 tags: 標籤 categories: 分類

 

網站圖片都保存在D:\study\program\blog\source\img目錄下，能夠修改爲本身的圖片。

若是換一臺電腦想遷移博客的話，最簡單的方法就是把博客整個目錄拷貝過去，就是這麼暴力。

原文連接【http://godweiyang.com/2018/04/13/hexo-blog/】