【GitHub】GitHub+Hexo搭建個人部落格

widiot1發表於2018-06-13
GithubHexo

個人部落格widiot’s blog

1 Hexo

1.1 介紹

Hexo是基於NodeJS的靜態部落格框架，簡單、輕量，其生成的靜態網頁可以託管在Github和Heroku上：

  • 超快速度
  • 支援MarkDown
  • 一鍵部署
  • 豐富的外掛

1.2 安裝node.js

在nodejs官網下載對應系統的安裝包，按提示安裝。

檢驗安裝成功：

node -v

1.3 安裝hexo

npm install hexo-cli -g

Mac系統則需要：

sudo npm install hexo-cli -g

2 搭建部落格

建立部落格目錄<username>.github.io：

hexo init username.github.io
cd username.github.io
npm install

生成靜態頁面，g即generate：

hexo clean
hexo g

執行，s即server：

hexo s

開啟瀏覽器，輸入地址localhost:4000即可看到部落格頁面。

3 發表文章

3.1 命令方式

在source/_posts目錄下生成test.md檔案，寫入一些內容再儲存：

hexo new test

然後生成靜態頁面，訪問localhost:4000檢視效果：

hexo clean
hexo g
hexo s

3.2 直接方式

在source/_posts/下新建.md檔案，然後寫入內容。

使用上述命令生成靜態頁面，訪問localhost:4000檢視效果。

4 配置

網站的設定大部分都在_config.yml檔案中，詳細配置可以檢視官方文件。

下面列出簡單常用配置：

  • title：網站標題
  • subtitle：網站副標題
  • description：網站描述
  • author：你的名字
  • language：網站使用的語言

注意：進行配置時，需要在冒號:後加一個英文空格：

title: myblog

5 換主題

Hexo中有很多主題，可以在官網檢視。這裡推薦hexo-next。下面說明更換主題的一般步驟。

下載主題資源：

git clone https://github.com/theme-next/hexo-theme-next themes/next

在網站配置檔案_config.yml中，配置theme，next是主題名稱，具體的可檢視主題的文件：

theme: next

可在/theme/{theme}/_config.yml 主題的配置檔案下進行主題的配置。

接下來執行除錯命令檢視效果：

hexo clean
hexo g
hexo s

6 部署到GitHub

在GitHub建立一個<username>.github.io的public倉庫，如果你的使用者名稱是xxx,則需要建立一個xxx.github.io的public倉庫。

安裝hexo-deployer-git：

npm install hexo-deployer-git --save

網站配置git，在網站的_config.yml中配置deploy，branch為分支，預設為master，可以不配置。repo為倉庫地址，在github上新建倉庫後，可複製地址：

deploy:
  type: git
  repo: <repository url>
  branch: [branch]

部署，d即deploy：

hexo d

7 標籤

7.1 兩個確認

確認站點配置檔案有：

tag_dir: tags

確認主題配置檔案有：

tags: /tags

7.2 新建tags頁面

hexo new page tags

此時會在source/下生成tags/index.md檔案。

7.3 修改source/tags/index.md

title: tags
date: 2015-10-20 06:49:50
type: "tags"
comments: false

7.4 在文章中新增tags

在文章xx.md中新增，多個Tag可按下面的格式新增：

tags: 
	- Tag1
	- Tag2
	- Tag3

其檔案頭部類似：

title: TagEditText
date: 2016-11-19 10:44:25
tags: 
	- Tag1
	- Tag2
	- Tag3

8 分類

8.1 兩個確認

確認站點配置檔案有：

category_dir: categories

確認主題配置檔案有：

categories: /categories

8.2 新建categories頁面

hexo new page categories

此時會在source目錄下生成categories/index.md檔案。

8.3 修改categories/index.md

title: categories
date: 2015-10-20 06:49:50
type: "categories"
comments: false

8.4 在文章中新增categories

在文章xx.md中新增：

categories: 
	- cate

其檔案頭部類似：

title: TagEditText
date: 2016-11-19 10:44:25
categories: 
	- cate

9 評論功能

安裝gitment：

npm install gitment --save

在 https://github.com/settings/applications/new 進行註冊，獲取Client ID和Client Secret。開啟themes/next目錄下的_config.yml檔案進行修改並儲存：

gitment:
  enable: true
  mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
  count: true # Show comments count in post meta area
  lazy: false # Comments lazy loading with a button
  cleanly: false # Hide 'Powered by ...' on footer, and more
  language: # Force language, or auto switch by theme
  github_user: <username> # MUST HAVE, Your Github Username
  github_repo: <username>.github.io # MUST HAVE, The name of the repo you use to store Gitment comments
  client_id: 76xxxxxxxxxxxxxxxx5f # MUST HAVE, Github client id for the Gitment
  client_secret: 4axxxxxxxxxxxxxxxxxxxxxxxxxxxxxxca # EITHER this or proxy_gateway, Github access secret token for the Gitment
  proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
  redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

生成網站和提交網站：

hexo g
hexo d

點選文章下方的初始化評論按鈕。

文章名太長會導致評論功能開放失敗出現Error: Validation Failed錯誤。修改檔案next/layout/_third-party/comments/gitment.swig，將id部分修改為id: '{{ page.date }}'：

    {% if page.comments %}
      <script type="text/javascript">
      function renderGitment(){
        var gitment = new {{CommentsClass}}({
            id: '{{ page.date }}',
            owner: '{{ theme.gitment.github_user }}',
            repo: '{{ theme.gitment.github_repo }}',
            {% if theme.gitment.mint %}
            lang: "{{ theme.gitment.language }}" || navigator.language || navigator.systemLanguage || navigator.userLanguage,

相關文章