構建本身的博客

時間 2019-11-08

標籤構建本身博客简体版

原文原文鏈接

1、前言

看過不少人，用github建立我的博客，最近抽空也實現的本身的博客，下面就把摸索過程記錄下。css

2、準備

安裝Node.js

Node.js下載地址：https://nodejs.org/en/download/html

安裝過程一路默認安裝便可。前端

詳細安裝文檔參看：http://www.runoob.com/nodejs/...node

安裝Git軟件

Git軟件下載地址：https://git-scm.com/downloadgit

安裝過程一路默認安裝便可。github

關於更多的Git講解參看：chrome

https://www.liaoxuefeng.com/w...npm

安裝Hexo

什麼是 Hexo？Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用Markdown（或其餘渲染引擎）解析文章，在幾秒內，便可利用靚麗的主題生成靜態網頁。json

Hexo官方網站：https://hexo.io/zh-cn/ ，我用的當前版本是v6.4.0，基本步驟：後端

新建一個blog空文件夾，cmd窗口或vscode終端，輸入命令npm install -g hexo-cli全局安裝hexo；
安裝完成後輸入hexo -v顯示hexo的相關信息說明安裝成功；
輸入命令hexo init初始化hexo項目，安裝相關依賴：
上一步安裝完成，輸入命令hexo s或hexo server，開啓服務，成功後，在瀏覽器訪問http://localhost:4000生成的默認主題博客。PS：在這裏能夠npm install hexo-browsersync --save實現熱更新，沒必要每次更改都去刷新瀏覽器。

安裝完成後的目錄結構

- node_modules // 依賴包
  - public // 存放生成的頁面
  - scaffolds // 生成頁模板
  - source // 建立的源文章
  - themes // 主題
  - _config.yml // 博客配置（站點配置）
  - db.json // 解析source獲得的庫文件
  - package.json // 項目依賴配置

3、修改站點配置

_config.yml文件是對整個站點基本信息的配置，好比：

# Site
title: // 博客名稱
subtitle: // 副標題
description: // 描述 用於seo
keywords: // 關鍵字 用於seo
author: // 做者 用於seo
language: // 語言
timezone: // 時區

4、Github建立一個hexo的代碼庫

和建立其它git倉庫同樣，只不過名稱必須爲yourname.github.io這種形式，其中yourname是你github我的帳號名，建立好後，找到站點配置文件（blog下的_config.yml文件），找到：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

改爲你的博客git倉庫地址和分支：

deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

這樣，遠程倉庫配置完成。接下來

輸入命令hexo generate或hexo g將原markedown文章生成靜態頁面，放置在生成的public目錄下；
npm install hexo-deployer-git --save安裝hexo的git插件；
再輸入命令hexo deploy或hexo d將生成的靜態頁面推送到遠程倉庫；
完成後，在瀏覽器訪問https://yourname.github.io/，就能看到你構建好的我的博客啦！

5、寫文章

hexo支持用markdown寫做，在目錄blog/source/_posts新建markdown文件，或者使用命令hexo new posts 你的文章標題。

小坑：{{}}符號編譯出錯

markdown生成靜態頁面，{{}}是swig模板符號，屬於特殊字符，在編譯時解析不了雙大括號中間字符串就會報錯

FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Template render error: (unknown path) [Line 3, Column 8]
  unexpected token: }}

解決方案：用轉義字符代替

{ -> &#123; — 大括號左邊部分Left curly brace
} -> &#125; — 大括號右邊部分Right curly brace

6、配置主題

hexo默認主題是landscape，樣式可能不是每一個人都喜好的，官方頁提供了一些主題，能夠按本身的風格安裝，只需在站點配置文件_config.yml更改主題名稱。

Next主題是目前比較流行的主題，文檔相對比較成熟。next主題文檔

安裝

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

更換主題

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

修改Next主題配置文件

目錄blog/themes/next找到_config.yml文件，其中有不少配置項，下面列舉幾個經常使用的。

更換頭像

# Sidebar Avatar
avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/avatar.png
  # If true, the avatar would be dispalyed in circle.
  rounded: true
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: false

只需將頭像的url換成你本身頭像的url或者直接覆蓋頭像圖片便可。

注意這裏的根 /的絕對路徑是 blog/themes/next/source/，之後寫文章引用本地圖片的話，注意放到這個目錄下！

代碼高亮

NexT使用Tomorrow Theme做爲代碼高亮，共有5款主題供你選擇。 NexT默認使用的是白色的normal主題，可選的值有normal，night，night blue， night bright，night eighties。

# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

添加分類頁

文章可能須要分類，添加分類頁

cd blog
hexo new page categories

此時在blog/source目錄下就生成了categories/index.md文件：

---
title: 分類
date: 2018-08-28 14:59:48
type: categories
comments: false // 分類頁不須要添加評論
---

而後，放開主題配置文件_config.yml中menu setting對categories註釋

menu:
  home: / || home
  categories: /categories/ || th

之後文章的內容頭聲明的分類就會在分類頁有索引了。

添加標籤頁

跟添加分類頁同樣，文章也須要標籤

cd blog
hexo new page tags

此時在blog/source目錄下就生成了tags/index.md文件：

---
title: 標籤
date: 2018-08-28 14:34:22
type: tags
comments: false // 標籤頁不須要評論
---

而後，放開主題配置文件_config.yml中menu setting對tags註釋

menu:
  home: / || home
  tags: /tags/ || tags

之後文章的內容頭聲明的標籤就會在標籤頁有對應索引了。

404頁

當訪問當前站點，頁面找不到，跳轉到404頁，推薦用騰訊公益404頁面，尋找丟失兒童，讓你們一塊兒關注此項公益事業！使用方法，新建404.html頁面，放到主題的source目錄下，內容以下：

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到個人主頁">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

站點分析統計

對於我的站點，咱們須要統計用戶訪問量，用戶分佈，跳轉率等。Next主題推薦使用的有百度統計、Google分析、騰訊分析了，使用均同樣，註冊獲取站點統計id。

百度統計

我一直用的百度統計，註冊百度統計，管理 > 網站列表 > 新增網站完成後，代碼管理 > 代碼獲取，就能獲得統計id。

# Baidu Analytics ID
baidu_analytics: 統計id

不蒜子統計

不蒜子統計能夠統計站點以及每一個頁面的PV、UV和站點總的訪問數，以小眼睛的形式展示。

編輯主題配置文件中的busuanzi_count的配置項。當enable: true時，表明開啓全局開關。若total_visitors、total_views、post_views的值均爲false時，不蒜子僅做記錄而不會在頁面上顯示。

內容分享服務

Next主題還提供了對外提供分享接口，包括百度分享、addthis Share和NeedMoreShare2，要用到哪一個，只需把相應enable: true，註冊帳號獲取id便可。

評論功能

當前版本配置，支持暢言，Disqus，valine，gitment。

暢言 - 搜狐提供的評論組件，功能豐富，體驗優異，防止注水；但必須進行域名備案。只要域名備過案就能夠經過審覈。
Disqus - 國外使用較多的評論組件。萬里長城永不倒，一枝紅杏出牆來，你懂的。
valine - LeanCloud提供的後端雲服務，可用於統計網址訪問數據，分爲開發版和商用版，只須要註冊生成應用App ID和App Key便可使用。
Ditment - Gitment 是一款基於GitHub Issues的評論系統。支持在前端直接引入，不須要任何後端代碼。能夠在頁面進行登陸、查看、評論、點贊等操做，同時有完整的Markdown / GFM和代碼高亮支持。尤其適合各類基於GitHub Pages的靜態博客或項目頁面。

暢言要備案，對於掛靠在GitHub的博客很是的不友好，放棄！Disqus，目前國內網絡環境訪問不了，放棄！valine在用戶沒有認證登陸能夠評論，不能防止惡意注水，放棄！我選擇用Gitment，讓用戶用本身的GitHub帳號才能評論，用git的一個倉庫來存儲評論（評論以該倉庫的issue形式展示）。

gitment配置

Gitment的所有配置項以下，

# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
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: true # Hide 'Powered by ...' on footer, and more
  language: zh-CN  # Force language, or auto switch by theme
  github_user: xxx # MUST HAVE, Your Github Username
  github_repo: xxx # MUST HAVE, The name of the repo you use to store Gitment comments
  client_id: xxx # MUST HAVE, Github client id for the Gitment
  client_secret: xxx # 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

開啓enable爲true就顯示評論框了，不過要真正實現評論可用，須要
用本身的github帳號註冊一個應用許可證書，即OAuth application，註冊成功就生成了client_id和client_secret。

步驟：你的github首頁 > settings > Developer settings > OAuth Apps > New oAuth App。填寫好相關信息，其中，Homepage URL和Authorization callback URL都寫上你的github博客首頁地址，好比https://xxx.github.io/，點擊Register application便可完成註冊，生成Client ID和Client Secret。