Hexo+github+coding+個性域名+trivas搭建博客全教程

轉自個人博客0pt1mus

寫在前面

首先，當我們要開始寫博客的時候，我們可以有兩種選擇來發布你寫的博客。

其一，在各大博客平臺上發佈。選擇這條途徑的話，我們可以省去一系列的麻煩，只專注與自己的內容即可。但是有好多限制，有些內容不能發佈。選擇的平臺可以有很多，如CSDN，簡書等。這兩個平臺都支持markdown的格式，很方便。

其二，則是自己搭建一個博客，可以有動態和靜態博客的選擇。之前也嘗試過動態博客的搭建，首先需要有自己的額服務器，github上有着開源的博客框架，大家可以嘗試一下，我是太笨，沒有成功，各種環境的依賴問題已經炸裂。下面貼上當時嘗試的一個Django所寫的框架地址。

然後則是靜態博客的搭建，Hexo是一個靜態博客的生成框架，使用簡單又快速。

下面的文章便介紹我通過Hexo搭建博客所爬過的坑。

從開始到結束，按照搭建博客的順序書寫，大家可以按着這個流程搭建，中間遇到問題可以私信我。

博客搭建

搭建過程所用到的環境：Node.js

第一步，安裝Node.js。

安裝後在命令行檢查安裝是否成功。

node -v
npm -v

若無報錯並返回版本號，證明安裝成功。

第二步，安裝Hexo

npm install -g hexo-cli

第三部，初始化Hexo

創建一個文件夾myblog，用來存放Hexo所生成的文件。

mkdir myblog
cd myblog
hexo init

之後我們在文件夾下可以發現生成了hexo博客的文件，目錄結構如下。

.
├── _config.yml
├── node_modules
├── package-lock.json
├── package.json
├── scaffolds
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source
│   └── _posts
└── themes
    └── landscape

其中我們只需要其中幾個目錄與文件。

_config.yml			# 站點配置文件，需要按照自己的信息進行配置
package.json		# 搭建博客過程中所安裝的插件都在該文件中配置，一般不用手動修改
scaffolds				# 生成模板，hexo命令生成文件的模板
source					# 生成靜態博客的源碼文件，_posts下是文章的存放位置
themes					# 博客主題的安裝目錄，landscape是默認主題，之後安裝的主題也都在這個文件夾下

現在我們就可以通過以下命令Hexo生成博客了。

hexo clean	# 清理刪除public文件夾，每次生成前都需清理
hexo g			# 生成博客，可以發現會生成一個public文件夾
hexo s			# 本地啓動hexo server

之後就可以通過http://localhost:4000/訪問博客。

這裏我貼出我的站點_config.yml。

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# hexo-neat
neat_enable: true
neat_html:
  enable: true
  exclude:  
neat_css:
  enable: true
  exclude:
    - '*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

# Site
title: 0pt1mus
subtitle: 不溫不火，不急不躁，瞭解hows背後的whys
description: 文化水平不夠可以讀，爲人處世不同可以學，錢沒有可以賺，唯獨你的內心必須堅定，你要不斷努力，並且相信你自己絕對是一個有價值，值得被尊重和喜歡的人。
author: 0pt1mus
email: [email protected]
language: zh-CN
timezone:
avatar: /images/avatar.jpg
# search: 59fe6eea70113d77622d1c85f2aeb87a

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://superj.site/
root: /
permalink: :year/:month/:day/:id/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

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

# Search
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

jsonContent:
  dateFormat: DD/MM/YYYY
  posts:
    title: true
    date: true
    path: true
    text: true
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: false
    author: false


feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:

sitemap:
  path: sitemap.xml

baidusitemap:
  path: baidusitemap.xml

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
 # - type: git
 #   repository: [email protected]:overoptimus/overoptimus.github.io.git
 #   branch: master
  - type: git
    repo: 
      coding: [email protected]:overoptimus/overoptimus.git
      github: [email protected]:overoptimus/overoptimus.github.io.git
    branch: master

發佈到github和coding

目前我們只能在本地訪問到我們的博客，現在我們將博客託管到github和coding中。

第一步，註冊github和coding的賬號

第二步，創建倉庫

註冊登錄後，在首頁可發現new repository，新建一個倉庫。

github創建名字爲username.github.io的倉庫，比如我的用戶名爲overoptimus，我的倉庫名爲overoptimus.github.io。

coding創建名字爲username的倉庫，比如我的用戶名爲overoptimus，我的倉庫名爲overoptimus。

注：coding的倉庫名可以爲任意

第三步，生成ssh添加到github和coding

在本地命令行中：

git config --global user.name "yourname"
git config --global user.email "youremail"

這裏的yourname和youremail是你在註冊時的用戶名和郵箱。

可通過以下命令檢查是否配置正確。

git config --list

然後生成ssh：

ssh-keygen -t rsa -C "youremail"

這時就會提示你在ssh生成在什麼位置，我是在mac環境下，是在~/.ssh下。

.
├── id_rsa
├── id_rsa.pub

可發現其中有兩個文件，id_rsa是祕鑰，id_rsa.pub是公鑰。我們需要將公鑰的內容保存在github和codig中。在網站的setting中可以找到設置ssh的選項。

第四部，安裝通過git部署的插件

npm install hexo-deployer-git --save

注：以下若無特殊聲明，均在myblog目錄下。

第四步，修改_config.yml

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  - type: git
    repo: 
      coding: [email protected]:overoptimus/overoptimus.git
      github: [email protected]:overoptimus/overoptimus.github.io.git
    branch: master

將最後的deploy修改爲上面的樣子，注意其中的鏈接是你的倉庫的鏈接。

第五步，發佈到github和coding

hexo clean
hexo g
hexo s

第六步，在github和coding中打開web服務。

分別進入github和coding的倉庫中，打開設置頁，github是github pages，coding是構建與部署中的靜態網站。

之後就可以通過https://overoptimus.github.io/和coding提示的網址訪問我們的網站。

第七步，配置個性域名

首先要購買一個域名，可以在阿里雲購買，也可以在GoDaddy中購買。

然後在解析中，添加CNAME類型的解析指向github和coding的網址。

再添加一條記錄爲www的記錄。

然後我們再添加兩條記錄，路線選擇境外，記錄還是www和@，記錄值爲我們的github pages的網址，我的即爲overoptimus.github.io。

之後我們可以通過自己的域名訪問我們的博客。

配置主題

從搭建博客到現在也更換過了好幾個主題，有next、pure、butterfly。

現在使用的是butterfly，配置情況可以參考下面的網址，很詳細，按着配置下來就可以了。

Butterfly

開始寫博客

到現在我們可以開始寫博客了。

hexo new "文章名"

在博客的目錄下，也就是myblog下，輸入上述命名，可以在source/_post下生成文章名.md的文件，然後我們編輯該文件，書寫文章就可以，markdown的語法網上有很多教程，百度一下學習吧。

每次寫完之後，進行以下命令：

hexo clean
hexo g
hexo d

這樣就可以將你的博客發佈上去了。

配置trivas實現自動部署博客到github和coding

我們在寫博客的過程中，每次寫了一篇文章後，就要執行重複的命令去將生成博客，然後推送到github和coding，並且我們也會需要將源碼進行一個備份，如果我們備份在硬盤裏，每次寫完文章都需要去更新硬盤中的文件，會比較麻煩。下面我介紹通過trivas同時實現博客的備份和自動化部署。

首先我們在github中創建一個名爲hexo-source的倉庫。然後在本地執行以下命令。

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/overoptimus/hexo-source.git //這裏要修改爲你自己的倉庫地址
git push -u origin master

將本地的hexo源碼推送到遠端的倉庫。

然後打開trivas官網。

通過github的賬戶進行登錄，然後開啓hexo-source的services integration服務。

點擊setting添加Environment Variables，name可以自己命名，value添加github和coding生成的訪問令牌，生成的位置github在settings->developer settings->personal access tokens，coding在個人設置->訪問令牌。權限選擇選擇完整的倉庫讀寫。

然後在本地的博客目錄，即myblog下，創建.trivas.yml文件，內容如下。

language: node_js # 設置語言

node_js: stable # 設置相應版本

cache:
    apt: true
    directories:
        - node_modules # 設置緩存，傳說會在構建的時候快一些

git:
    depth: 1
    submodules: true

before_install:
    - export TZ='Asia/Shanghai'
    - npm install hexo-cli -g

install:
    - npm install # 安裝hexo及插件

script:
    - hexo clean # 清除
    - hexo g # 生成

after_script:
    # - git clone https://${GH_REF} pub_web # 因爲我有兩個倉庫，先將發佈服務的倉庫clone下來，
    # - cp -rf public/* pub_web/ # 將源博客倉庫(blog.git)目錄下的public文件夾下的文件複製到發佈服務的倉庫(chenzhijun.github.com.git)中
    # - cd pub_web # 進入到git倉庫
    - cd ./public
    - git init
    - git config user.name "overoptimus"
    - git config user.email "[email protected]"
    - git add .
    - git commit -am "Travis CI Auto Builder :$(date '+%Y-%m-%d %H:%M:%S')" # 零時區，+8小時
    - git push --force --quiet "https://${GITHUB_TOKEN}@${GH_REF}" master:master
    - git push --force --quiet "https://EBlvrRYUzD:${CD_TOKEN}@${CD_REF}" master:master
branches:
    only:
        - master #只監測master分支,這是我自己的博客，所以就用的master分支了。
env:
    global:
        - GH_REF: github.com/overoptimus/overoptimus.github.io.git #設置GH_REF，注意更改yourname,GITHUB_TOKEN:就是我們在travis-ci倉庫中配置的環境變量
        - GITHUB_TOKEN: "${github_token}"
        - CD_REF: e.coding.net/overoptimus/overoptimus.git
        - CD_TOKEN: "${cd_token}"

注意其中的一些位置要改成你自己的信息，特別注意在推送到coding的地址中https://後接的一串字符是在你創建coding的訪問令牌時的頁面中提示你的。且其中${xx_token}是與你在Environment Variable中的name是一致的。

現在設置已經完成，將本地的更改推送到遠程倉庫，然後就會在trivas的網站中發現，開始自動部署了。過一會兒你就訪問你的博客，發現已經更新了。

然後你就會發現，你可以在任意的地方，即使沒有git、node.js的環境，你在源碼倉庫進行更改並提交後，trivas就可以幫助你將更新後的內容同步到你的博客中。

寫在後面

現在你就可以很方便、優雅的書寫自己的博客文章了，如果你並不喜歡butterfly這個主題，你也可以百度一下，尋找你自己的最愛。

希望這篇文章能夠對你有所幫助。