hexo+github從0到1搭建免費個人部落格

qijian0503發表於2018-09-21
HexoGithub

本教程詳細記錄了使用hexo+github從0到1搭建免費個人部落格
簡書地址：www.jianshu.com/u/cfd6f3a8a…

基礎環境搭建

  • 安裝node.js
    node版本：
C:\Users\Administrator>node -v
v8.11.1
複製程式碼
  • 安裝git
    git版本：
C:\Users\Administrator>git --version
git version 2.9.0.windows.1
複製程式碼
  • 選裝cnpm
    淘寶cnpm官網。由於npm國內下載速度經常抽風，所以建議安裝淘寶的這個映象；使用方法就是在命令中把npm換成cnpm即可。
npm install -g cnpm --registry=https://registry.npm.taobao.org
複製程式碼

安裝Hexo及其相關外掛

  • 全域性安裝Hexo
cnpm install hexo-cli -g
複製程式碼

裝完成後輸入hexo -v，出現版本資訊則表示安裝成功。

  • 在專案中安裝Hexo
    在自定義目錄（D:\workspace），新建hexo資料夾，然後輸入cd hexo（進入該資料夾），在依次執行如下操作
hexo init   #這個時間也會比較長，也有可能要等幾分鐘，有顯示 WARN 也不用管
cnpm install #有顯示 WARN 也不用管
複製程式碼

安裝完成之後，D:\workspace\hexo 目錄結構是這樣的：

安裝 hexo 後的目錄結構

  • 安裝hexo的外掛
cnpm install hexo-server --save     #搭建本地伺服器所需外掛
cnpm install hexo-deployer-git --save   #使用git方式進行部署部落格所需外掛
複製程式碼

在本地生成部落格靜態頁面並預覽

  • 在本地生成靜態頁面
hexo generate
複製程式碼

會生成一個存放靜態檔案的資料夾public，其簡寫形式為hexo g；

  • 啟動本地伺服器
hexo server
複製程式碼

其簡寫形式為hexo s；
這條指令執行完成後可在本地啟動伺服器並預覽部落格，預設網址為：http://localhost:4000/
如果以上步驟都不出意外的話，你就會看到一個Hexo部落格初始化的頁面。

image.png

建立Github pages並SSH授權

  • 建立倉庫
    首先要有自己的Github賬號，沒有的可以到GitHub官網註冊賬號，註冊完後，我們來下一步，在我們的GitHub上面右上角的New repository來建立一個倉庫。
    image.png

倉庫名必須遵守相應格式：github_username.github.io， 這樣子在訪問主頁的時候直接用：github_username.github.io就能訪問。

image.png
我這裡因為是已經建立了一個倉庫了，所以會有提示，然後點Create repository確定建立倉庫。

  • 本地生成ssh金鑰
    建立好倉庫之後，要本地生成 SSH 祕鑰，方便電腦上的 git 軟體好提交內容到 Github上
  1. git bash命令列下輸入ssh-keygen -t rsa -C ‘你的郵箱地址’，然後回車，回車，再回車，一共 3 次回車。
  2. 此時，生成金鑰後，在你電腦目錄：C:\Users\你的計算機使用者名稱.ssh 下，會生成兩個檔案：
    私鑰：id_rsa
    公鑰：id_rsa.pub
  3. 現在用記事本開啟 id_rsa.pub，複製檔案中的所有內容 訪問：github.com/settings/ss… ，點選新增新祕鑰(New SSH key)，效果如下圖
    Title：自己隨便取
    Key：把剛剛複製的都貼上進來

image.png

本地部落格同步到GitHub上

這一步其實就是把本地生成的部落格內容（靜態頁面）放到GitHub新建成的倉庫qijian0503.github.io中。

  • 編輯部落格配置檔案: _config.yml
    在hexo根目錄（也就是D:\workspace\hexo資料夾）下找到_config.yml檔案，把其中的deploy引數（沒有的話就按如下格式新建，注意冒號後面一定要有一個空格），修改為（你需要認真看的是含有中文註釋的內容）：
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site，這一塊區域主要是設定部落格的主要說明，需要注意的是：每個冒號後面都是有一個空格，然後再書寫自己的內容的
title: qijian技術棧
subtitle: 記錄所有技術相關
description: 技術棧
keywords:
author: qijian
language: zh-Hans
timezone:

# URL，這一塊一般可以設定的是 url 這個引數，比如我要設定繫結域名的，這裡就需要填寫我的域名資訊
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://geekstar.site
root: /
permalink: :year/:month/:day/:title/
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: false
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: landscape

# Deployment
## 這裡是重點，這裡是修改釋出地址，因為我們前面已經加了 SSH 金鑰資訊在 Github 設定裡面了，所以只要我們電腦裡面持有那兩個金鑰檔案就可以無需密碼地跟 Github 做同步。
## 需要注意的是這裡的 repo 採用的是 ssh 的地址，而不是 https 的。分支我們預設採用 master 分支，以後你翅膀硬了要換其他也無所謂。
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:qijian0503/qijian0503.github.io.git
  branch: master

複製程式碼
  • 重新部署
    在部落格根目錄下開啟Git Bash，依次執行如下Hexo命令：
hexo clean    #會清除快取檔案db.json及之前生成的靜態資料夾public；
hexo g     #會重新生成靜態資料夾public；
hexo deploy    #因為之前已經安裝了外掛並且在部落格配置檔案中也配置好了，所以這個命令會在部落格根目錄下生成一個.deploy_git的資料夾，並 把本地生成的靜態檔案部署到qijian0503.github.io這個倉庫中的master分支上；簡寫形式為hexo d；
複製程式碼

hexo g 和 hexo d可以合併在一起寫：hexo g -d

執行：hexo deploy，有彈出下面提示框，請輸入：yes

image.png
提交成功效果如下：
image.png

  • 在瀏覽器中訪問部落格
    在瀏覽器中輸入 qijian0503.github.io（可能你已經發現了，這個就是之前新建倉庫的名字，同時也是你部落格的域名），即可以再次看到那個熟悉又親切的部落格頁面了。

至此，我們已經通過Hexo建立了一個最原始的部落格，並且通過把部落格靜態檔案放到GitHub的倉庫中，實現了從網上以GitHub的預設域名訪問這個部落格。接下來要做的就是要錦上添花了：換個好看的主題；自定義部落格的域名；操作及優化部落格。

更換主題

更換主題主要是兩步，先下載主題然後放到部落格中的themes資料夾（專門用來存放主題）下，再修改主題的配置檔案_config.yml中相關引數，啟用themes資料夾下新增的主題。這裡用Next主題做示例。

  1. 下載Next主題。
    進入 hexoBlog/themes 資料夾中，開啟Git Bash皮膚，輸入：
git clone https://github.com/iissnan/hexo-theme-next themes/next
複製程式碼

把主題包克隆到themes資料夾中即可。 2. 啟用主題
與所有 Hexo 主題啟用的模式一樣。 當 克隆/下載 完成後，開啟themes下的主題配置檔案_config.yml， 找到 theme 欄位，並將其值更改為 next（注意冒號後面要留一個 空格）。 3. 驗證主題
清除並重新生成hexo靜態檔案，啟動本地伺服器，然後通過 http://localhost:4000/ 預覽部落格：

hexo clean      #清除靜態檔案
hexo g          #重新生成靜態檔案
hexo s      #啟動伺服器
複製程式碼

如果網路沒問題，通過域名訪問你的部落格也可以看到剛換的新主題了。 關於更換Next主題的詳細介紹，也可訪問Next中文官網

配置自定義域名

  • 註冊域名
    域名註冊商可選擇阿里雲等平臺進行註冊，.site|.top字尾域名都很便宜。這裡就不記錄了，大家自信去註冊吧。

    image.png

  • 新建CNAME檔案

新建一個CNAME檔案（檔名叫 CNAME，沒有檔案字尾的），把該檔案放在 D:\workspace\hexo\source 目錄下
CNAME 上的內容需要寫你具體要繫結的域名資訊

image.png
依次執行

hexo clean 
hexo g 
hexo d
複製程式碼
  • 域名解析設定
    檢視github空間服務IP：ping www.qijian0503.github.io
    image.png

    登入阿里雲【域名-點選域名列表中的域名-域名解析】進入域名的解析後臺，新增如下兩條解析記錄：
    image.png
    設定好之後，等過幾分鐘域名解析好之後，我們訪問：www.geekstar.site ，即可通過域名訪問到你的部落格了。

部落格操作

  • 新建文章
hexo new post 背影
複製程式碼

執行上面命令會新建一篇名為‘背影’的文章，原始檔會自動生成到hexoBlog/source/_post 路徑下，字尾為點md ，直接開啟編輯就可以了。編輯完儲存，然後再依次執行

hexo clean 
hexo g 
hexo d
複製程式碼

在部落格就可以看到你的文章了（有時候網路問題生成會比較慢，需要等幾分鐘才可以看到）。

  • 新建頁面
    新建標籤、分類、關於我等各種頁面，並在部落格的選單欄中顯示。這裡以新建‘標籤’頁面來做示範。
  1. 建立頁面
hexo new page 'tags'
複製程式碼

會在hexoBlog/source路徑下自動生成一個名為tags的資料夾，裡面包含一個index.md的檔案，在這個檔案中新增對應的頁面型別type: tags：

---
title: tags
date: 2018-09-16 16:20:05
type: "tags"
---
複製程式碼
  1. 把頁面路徑新增到選單中。
    編輯主題配置檔案（themes/_config.yml）,找到munu欄位，新增tag: /tags（格式為item_name: link），如下：
menu:
    home: /
    tag: /tags    #‘標籤’’頁面的路徑
複製程式碼

參考連結：
blog.csdn.net/weixin_3934…
blog.csdn.net/qq_32454537…
www.jianshu.com/p/21c94eb7b…
blog.csdn.net/linshuhe1/a…
www.jianshu.com/p/1c98aed8d…
www.jianshu.com/p/ea5ac6162…
blog.csdn.net/u011976726/…
www.cnblogs.com/wanghuaijun…
www.cnblogs.com/zhangqie/p/…

相關文章