手把手教你使用Hexo + Github Pages搭建個人獨立博客

2022-01-12 開發者

發者（KaiFaX）

面向開發者、程式設計師的專業平臺！系統環境配置

要使用Hexo，需要在你的系統中支持Nodejs以及Git，如果還沒有，那就開始安裝吧！

安裝Node.js

下載Node.js（https://nodejs.org/download/）

參考地址：安裝Node.js（http://www.runoob.com/nodejs/nodejs-install-setup.html）

安裝Git

下載地址：http://git-scm.com/download/

安裝Hexo
$ cd d:/hexo
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo g # 或者hexo generate
$ hexo s # 或者hexo server，可以在http://localhost:4000/ 查看

這裡有必要提下Hexo常用的幾個命令：

hexo generate (hexo g) 生成靜態文件，會在當前目錄下生成一個新的叫做public的文件夾

hexo server (hexo s) 啟動本地web服務，用於博客的預覽

hexo deploy (hexo d) 部署播客到遠端（比如github, heroku等平臺）

另外還有其他幾個常用命令：

$ hexo new "postName"
$ hexo new page "pageName"

常用簡寫


$ hexo n == hexo new
$ hexo g == hexo generate
$ hexo s == hexo server
$ hexo d == hexo deploy

常用組合


$ hexo d -g #生成部署
$ hexo s -g #生成預覽

現在我們打開http://localhost:4000/ 已經可以看到一篇內置的blog了。


目前我安裝所用的本地環境如下：(可以通過hexo -v查看)

hexo: 3.2.0hexo-cli: 1.0.1os: Windows_NT 6.3.9600 win32 x64http_parser: 2.5.2node: 4.4.1v8: 4.5.103.35uv: 1.8.0zlib: 1.2.8ares: 1.10.1-DEVicu: 56.1modules: 46openssl: 1.0.2g

Hexo主題設置

這裡以主題yilia為例進行說明。

安裝主題

$ hexo clean
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

啟用主題

修改Hexo目錄下的_config.yml配置文件中的theme屬性，將其設置為yilia。

更新主題

$ cd themes/yilia
$ git pull
$ hexo g # 生成
$ hexo s # 啟動本地web伺服器

現在打開http://localhost:4000/ ，會看到我們已經應用了一個新的主題。

Github Pages設置什麼是Github Pages

GitHub Pages 本用於介紹託管在GitHub的項目，不過，由於他的空間免費穩定，用來做搭建一個博客再好不過了。

每個帳號只能有一個倉庫來存放個人主頁，而且倉庫的名字必須是username/username.github.io，這是特殊的命名約定。你可以通過http://username.github.io 來訪問你的個人主頁。

這裡特別提醒一下，需要注意的個人主頁的網站內容是在master分支下的。

創建自己的Github Pages

註冊GitHub及使用Github Pages的過程已經有很多文章講過，在此不再詳述，可以參考：

一步步在GitHub上創建博客主頁 全系列

如何搭建一個獨立博客——簡明Github Pages與Hexo教程

在這裡我創建了一個github repo叫做 jiji262.github.io. 創建完成之後，需要有一次提交(git commit)操作，然後就可以通過連結http://jiji262.github.io/ 訪問了。（現在還沒有內容，別著急）

部署Hexo到Github Pages

這一步恐怕是最關鍵的一步了，讓我們把在本地web環境下預覽到的博客部署到github上，然後就可以直接通過http://jiji262.github.io/訪問了。不過很多教程文章對這個步驟語焉不詳，這裡著重說下。

首先需要明白所謂部署到github的原理。

之前步驟中在Github上創建的那個特別的repo（jiji262.github.io）一個最大的特點就是其master中的html靜態文件，可以通過連結http://jiji262.github.io來直接訪問。

Hexo -g 會生成一個靜態網站（第一次會生成一個public目錄），這個靜態文件可以直接訪問。

需要將hexo生成的靜態網站，提交(git commit)到github上。

明白了原理，怎麼做自然就清晰了。

使用hexo deploy部署

hexo deploy可以部署到很多平臺，具體可以參考這個連結. 如果部署到github，需要在配置文件_config.xml中作如下修改：

deploy:  type: git  repo: git@github.com:jiji262/jiji262.github.io.git  branch: master

然後在命令行中執行

 npm install hexo-deployer-git --save

使用git命令行部署

不幸的是，上述命令雖然簡單方便，但是偶爾會有莫名其妙的問題出現，因此，我們也可以追本溯源，使用git命令來完成部署的工作。

clone github repo

$ cd d:/hexo/blog

$ git clone https://github.com/jiji262/jiji262.github.io.git .deploy/jiji262.github.io

將我們之前創建的repo克隆到本地，新建一個目錄叫做.deploy用於存放克隆的代碼。

創建一個deploy腳本文件

hexo generatecp -R public/* .deploy/jiji262.github.iocd .deploy/jiji262.github.iogit add .git commit -m 「update」git push origin master

簡單解釋一下，hexo generate生成public文件夾下的新內容，然後將其拷貝至jiji262.github.io的git目錄下，然後使用git commit命令提交代碼到jiji262.github.io這個repo的master branch上。

需要部署的時候，執行這段腳本就可以了（比如可以將其保存為deploy.sh）。執行過程中可能需要讓你輸入Github帳戶的用戶名及密碼，按照提示操作即可。

Hexo 主題配置

每個不同的主題會需要不同的配置，主題配置文件在主題目錄下的_config.yml。


以我們使用的yilia主題為例，其提供如下的配置項（theme\yilia_config.yml）：

# Headermenu:  主頁: /  所有文章: /archives  # 隨筆: /tags/隨筆# SubNavsubnav:  github: "#"  weibo: "#"  rss: "#"  zhihu: "#"  #douban: "#"  #mail: "#"  #facebook: "#"  #google: "#"  #twitter: "#"  #linkedin: "#"rss: /atom.xml# Contentexcerpt_link: morefancybox: truemathjax: true# Miscellaneousgoogle_analytics: ''favicon: /favicon.png#你的頭像urlavatar: ""#是否開啟分享share: true#是否開啟多說評論，填寫你在多說申請的項目名稱 duoshuo: duoshuo-key#若使用disqus，請在博客config文件中填寫disqus_shortname，並關閉多說評論duoshuo: true#是否開啟雲標籤tagcloud: true#是否開啟友情連結#不開啟——#friends: false#是否開啟「關於我」。#不開啟——#aboutme: false#開啟——aboutme: 我是誰，我從哪裡來，我到哪裡去？我就是我，是顏色不一樣的吃貨…

其他高級使用技巧綁定獨立域名

購買域名
在你的域名註冊提供商那裡配置DNS解析，獲取GitHub的IP位址點擊，進入source目錄下，添加CNAME文件

$ cd source/
$ touch CNAME
$ vim CNAME # 輸入你的域名
$ git add CNAME
$ git commit -m "add CNAME"

使用圖床

使用七牛雲存儲
自己在github上搭建的圖床：http://jiji262.github.io/qiniuimgbed/ ，需要首先註冊七牛帳號使用。

添加插件

添加sitemap和feed插件

$ npm install hexo-generator-feed
$ npm install hexo-generator-sitemap

修改_config.yml，增加以下內容

# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap

#Feed Atom
feed:
 type: atom
 path: atom.xml
 limit: 20

#sitemap
sitemap:
 path: sitemap.xml

配完之後，就可以訪問http://jiji262.github.io/atom.xml和http://jiji262.github.io/sitemap.xml，發現這兩個文件已經成功生成了。

添加404公益頁面

GitHub Pages有提供製作404頁面的指引：Custom 404 Pages。

直接在根目錄下創建自己的404.html或者404.md就可以。但是自定義404頁面僅對綁定頂級域名的項目才起作用，GitHub默認分配的二級域名是不起作用的，使用hexo server在本機調試也是不起作用的。

推薦使用騰訊公益404。

添加about頁面

之後在\source\about\index.md目錄下會生成一個index.md文件，打開輸入個人信息即可，如果想要添加版權資訊，可以在文件末尾添加：

<div style="font-size:12px;border-bottom: #ddd 1px solid; BORDER-LEFT: #ddd 1px solid; BACKGROUND: #f6f6f6; HEIGHT: 120px; BORDER-TOP: #ddd 1px solid; BORDER-RIGHT: #ddd 1px solid"><div style="MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 5px; MARGIN-RIGHT: 10px"><IMG alt="" src="https://avatars1.githubusercontent.com/u/168751?v=3&s=140" width=90 height=100></div><div style="LINE-HEIGHT: 200%; MARGIN-TOP: 10px; COLOR: #000000">本文連結：<a href="<%= post.link %>"><%= post.title %></a> <br/>作者： <a href="http://jiji262.github.io/">令狐蔥</a> <br/>出處： <a href="http://jiji262.github.io/">http://jiji262.github.io/</a><br/>本文基於<a target="_blank" title="Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)" href="http://creativecommons.org/licenses/by-sa/4.0/"> 知識共享署名-相同方式共享 4.0 </a>國際許可協議發布，歡迎轉載，演繹或用於商業目的，但是必須保留本文的署名 <a href="http://jiji262.github.io/">令狐蔥</a>及連結。</div></div>

添加Fork me on Github

獲取代碼，選擇你喜歡的代碼添加到hexo/themes/yilia/layout/layout.ejs的末尾即可，注意要將代碼裡的you改成你的Github帳號名。

添加支付寶捐贈按鈕及二維碼支付支付寶捐贈按鈕

在D:\hexo\themes\yilia\layout_widget目錄下新建一個zhifubao.ejs文件，內容如下

<p class="asidetitle">打賞他</p><div><form action="https://shenghuo.alipay.com/send/payment/fill.htm" method="POST" target="_blank" accept-charset="GBK"><br/><input name="optEmail" type="hidden" value="your 支付寶帳號" /><input name="payAmount" type="hidden" value="默認捐贈金額(元)" /><input id="title" name="title" type="hidden" value="博主，打賞你的！" /><input name="memo" type="hidden" value="你Y加油，繼續寫博客！" /><input name="pay" type="image" value="轉帳" src="http://7xig3q.com1.z0.glb.clouddn.com/alipay-donate-website.png" /></form></div>

添加完該文件之後，要在D:/hexo/themes/yilia/_config.yml文件中啟用，如下所示，添加zhifubao

widgets:- category- tag- links- tagcloud- zhifubao- rss

二維碼捐贈

首先需要到這裡獲取你的支付寶帳戶的二維碼圖片，支付寶提供了自定義功能，可以添加自定義文字。

我的二維碼掃描捐贈添加在about頁面，當然你也可以添加到其它頁面，在D:\hexo\blog\source\about下有index.md，打開，在適當位置添加

<center>歡迎您捐贈本站，您的支持是我最大的動力！![][http://7xsxyo.com1.z0.glb.clouddn.com/2016/04/15/FoJ1F6Ht0CNaYuCdE2l52F-Fk9Vk202.png]</center><br/>

<center>可以讓圖片居中顯示，注意將圖片連結地址換成你的即可。

添加百度站內搜索

點擊進入，點擊其它工具->站內檢索->現在使用->新建搜尋引擎->查看代碼，將代碼裡的id值複製，打開/d/hexo/themes/jacman/_config.xml，配置成如下即可。

baidu_search:     ## http://zn.baidu.com/  enable: true  id: "1433674487421172828" ## e.g. "783281470518440642"  for your baidu search id  site: http://zhannei.baidu.com/cse/search ## your can change to your site instead of the default site

使用不蒜子添加訪客統計

詳情參考搞定你的網站計數，具體做法很簡單，就是在你的themes/your themes/layout/_partial/footer.ejs底部加入這段腳本

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然後在<p></p>中間添加如下統計信息即可

本站總訪問量 <span id="busuanzi_value_site_pv"></span> 次, 訪客數 <span id="busuanzi_value_site_uv"></span> 人次, 本文總閱讀量 <span id="busuanzi_value_page_pv"></span> 次

不蒜子的官方服務網站是不蒜子，目前最大的弊端就是不開放註冊，所以對於運行了一段時間的網站，不蒜子的數據都是從1開始，沒辦法設置，只有等後期開放註冊之後，登入網站才能對統計計數進行設置。

來源：http://jiji262.github.io/

原文：http://jiji262.github.io/2016/04/15/2016-04-15-hexo-github-pages-blog/

如有侵權或不周之處，敬請勞煩聯繫若飛（微信：1321113940）馬上刪除，謝謝！

1. 回復「m」可以查看歷史記錄；

2. 回復「h」或者「幫助」，查看幫助；

      開發者已開通多個微信群交流學習，請加若飛微信：1321113940 進群

開發者：KaiFaX

相關焦點

  • 使用GitHub+Hexo快速搭建自己的技術博客
    很多人一想到做網站就會想到說要買域名買伺服器等等, 一年又得不少錢吶, 其實不用, 做一個技術博客可以完全免費的, 我們可以借用Github給我們提供的免費倉庫來存放我們的博客項目, 也可以使用Github給我們提供的靜態頁面地址來訪問到我們的博客, 所以都是免費的, 如果你想看起來高大上一些, 那你可以花錢買一個自己喜歡的域名, 那也花不了多少錢.
  • 手把手教你從零搭建和部署自己的個人博客
    使用WordPress等成熟框架搭建動態博客 + 伺服器部署•優點：相對簡單•缺點：笨重c. 使用JavaPHP、Python等語言開發屬於自己的動態博客 + 伺服器部署•優點：功能強大•缺點：麻煩、不易上手（2）靜態博客搭建a. 使用Hexo、Hugo、jekyll等主流博客框架搭建靜態博客 + 託管在GitHub、碼雲等公共平臺。
  • 「分享」|hexo搭建個人博客
    圖1如果你沒有自己伺服器的話，而且只是弄著玩玩，不怎麼經常性去維護的話，可以考慮部署到github或者coding呢，這裡暫時只講部署到github，coding類似。如果你有自己的伺服器，並且想更多推廣出去的話，那可就要好好多打理啦。本文採用的主要是hexo來搭建。以下內容如果是用sudo apt-get install的話，缺少依賴時應先運行sudo apt-get update，其他的內容後續想到再補充。1.
  • 如何搭建一個比簡書更精美的個人博客
    幸好我們生存在一個開源的時代，今天小編就用hexo，帶你搭建一個比簡書更精美的個人博客。只要把hexo部署到雲伺服器再配置一個域名就萬事大吉了。二、部署然而，大多數想嘗鮮的人並不想如此破費。我們也還需要其他方案——利用github來建立自己的主頁。
  • 利用 Github Pages 和 Hugo 快速搭建免費的個人網站
    點擊上方「程序猿技術大咖」，關注並選擇「設為星標」你有個人網站嗎？在自媒體時代，人人都在不斷向網際網路等不同媒介輸出內容，如：博客、微博以及抖音等，並在特定領域，依靠於廣大社交媒體/平臺，如：CSDN、掘金、知乎、InfoQ 等等，發表著自己的心得、學習經歷、日常生活等。
  • Hexo(3)-安裝自己喜歡的主題
    歡迎在今天下面一條推送中留下你的博客地址！我們之前使用 Hexo 生成的博客使用的是 Hexo 的默認主題：Landscape。怎麼說呢，這個主題猛地一看還行，仔細一看還不如猛地一看，所以我決定另尋歸宿。
  • 前端技術小白零基礎搭建免費個人網站
    挺高大上的接下來從零開始搭建吧！滴滴~~裝逼時刻開始啦！1、安裝Git bash先把軟體下載到本地，雙擊exe文件，默認勾選一路next就可以了。（註：我系統是32位，工具獲取在微信回覆：git ）點擊Automatic page generator，Github將會自動替你創建出一個gh-pages的頁面。
  • Hexo 中 Next 主題設置
    注意:由於微信公眾號「湧動的生命力」不能引用外鏈，外鏈詳見參考文獻部分Hexo 中有很多主題，可以在官網 Hexo主題中查找選擇自己喜歡的主題，我最終選擇的是 Next，主要是因為簡潔且網上的教程也比較多，這裡記錄下我博客的 Next 主題配置，效果詳見博客：https://monkeylzl.github.io/更換主題
  • 【讀者投稿】用Github+docsify,我花了半天就搭好了個人博客
    和一般的使用Hexo、Jekyll、Hugo等博客框架搭建的博客可能有些差異。這個更像是一個Document API，不過博客也是一些文章啦。使用的框架技術docsify框架基於Github Pages的站點部署我是在Windows 7下搭建的網上好些搭建博客的視頻教程，大部分用的是Macbook。沒辦法，「實力確實不允許啊」，我還掙扎在Windows的苦海中。等我有錢了，我也要賣最好的Mac，寫最渣的代碼。
  • 唯美主題hexo-sakura使用教程
    老實說我目前也不是很有條理233333333~1、主題下載安裝hexo-theme-sakura建議下載壓縮包格式，因為除了主題內容還有些source的配置對新手來說比較太麻煩，直接下載解壓就省去這些麻煩咯。下載好後解壓到博客根目錄（不是主題目錄哦，重複的選擇替換）。接著在命令行（cmd、bash）運行npm i安裝依賴。
  • 不會代碼,如何零成本搭建個人博客?
    自微信推出公眾號後，無論是博客時代就開始寫作的人，還是後來有志於投身新媒體的人，都紛紛註冊了自己的帳號
  • Docker最全教程之使用Node.js搭建團隊技術文檔站(二十四)
    ENTRYPOINT ["node","app.js"]構建命令如下所示：docker build --rm -f "dockerfile" -t nodetest1:latest .參考腳本如下所示：docker run -it --rm `--name node-running-script `-v D:\temp\node:/usr/src/myapp `-w /usr/src/myapp `node:8.9-alpine node app.js
  • 教你如何搭建自己的圖床
    動動大拇指關注哦~教你如何搭建自己的圖床
  • 那些看上去高大上的項目文檔和個人博客原來用了這些技術
    DocsifyDocsify 可以快速幫你生成文檔網站。它不會生成靜態的 .html 文件，所有轉換工作都是在運行時。如果你想要開始使用它，只需要創建一個 index.html 就可以開始編寫文檔並直接部署在 GitHub Pages 或者Gitee Pages。
  • 手把手教你從0到1搭建AB測試系統(一)
    為什麼要使用A/B測試？A/B測試的架構是什麼？最近一段時間在負責公司內部AB測試系統從0到1的搭建，在實現中踩了很多坑，也做了很多競品分析了解國內外的競品通用做法。藉此機會總結下這段時間的經驗並分享給大家，希望能讓看到這篇文章的人少走彎路。
  • 基於容器部署hugo博客 – hugo個人博客折騰記之後篇
    如果是使用hugo自帶的高亮且使用的是class的方式的話，我覺得應該用這兩個都OK。就看你喜歡的那個配色在對應的方案裡有沒有提供。關於第二點，基於隱私，不記錄郵箱，這個我可以理解，但是不記錄網址，博客與博客之間就達不到那種互動互踩的效果了。其它博主在你的博客留言了，你卻不知道他的博客網址。不記錄評論者網址這一點，我有時間再想辦法改進一下。第三點，我提交了一個使用sendgrid和mailgun的WEB API發郵件的PR給官方，然後官方拒絕了。理由是「這會使代碼膨脹」， 這是什麼理由？
  • 使用pelican搭建自己的靜態博客
    前言最近想要搭建自己的靜態博客
  • 介紹幾個Github技巧!是二班的牛逼!
    這裡經常遇到的痛點是，master遇到變更，經常需要去sync到gh-pages，特別是純web前端項目，這樣的痛點是非常地痛。Github官方可能嗅覺到了該痛點，出了個master當作網站是選項，太有用了。