使用hexo和github搭建我的博客網站

時間  2019-11-08
標籤 使用 hexo github 搭建 我的 博客 網站 欄目 Git 简体版
原文   原文鏈接

在這裏插入圖片描述
使用hexo+github能夠免費、快速地搭建一個靜態博客網站，而且使用hexo提供的命令以及git自身的功能能夠很便捷地管理博客。

使用github部署靜態頁面

在瞭解hexo以前，咱們先看看如何使用github部署靜態頁面。html

註冊github帳號

訪問github官網註冊一個帳號，該流程和通常網站註冊帳號同樣，在此不贅述。node

建立一個git倉庫

在這裏插入圖片描述
其餘項若是須要能夠自主填寫，這裏只填寫倉庫名，點擊Create repository建立倉庫。
在這裏插入圖片描述

提交一個測試頁面

執行git clone命令將倉庫克隆到本地git

git clone git@github.com:mfaying/hexo-test.git
複製代碼

在這裏插入圖片描述
向hexo-test倉庫提交一個測試的html頁面，命名爲index.html，內容以下： 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hexo test</title>
</head>
<body>
  hexo test
</body>
</html>
複製代碼

提交併推到遠端github

git add .
git commit -m 'add index.html'
git push origin master
複製代碼

提交成功之後，hexo-test倉庫的內容變成了 npm

在這裏插入圖片描述

setting設置

點擊setting設置 json

在這裏插入圖片描述
找到GitHub Pages，點擊Choose a theme
在這裏插入圖片描述
直接點擊Select theme
avatar

此時你會發現GitHub Pages發生了變化，Your site is ready to be published at https://mfaying.github.io/hexo-test/說明你的靜態網站已經建成了。 api

在這裏插入圖片描述
直接點擊https://mfaying.github.io/hexo-test/ 訪問便會出現以下內容，靜態服務器默認會訪問index.html文件。
avatar

至此，咱們成功地使用github搭建了一個靜態網站。固然啦，這個網站幾乎沒有什麼內容，因此接下來咱們將使用hexo搭建一個功能完備的博客網站，可是部署方法就是這裏介紹的github的靜態服務器功能。緩存

使用hexo搭建博客網站

全局安裝hexo-cli

npm install hexo-cli -g
複製代碼

npm安裝速度較慢，能夠切換到國內的淘寶NPM鏡像，使用cnpm命令代替npm命令安裝。bash

安裝完成後執行hexo -v檢查安裝是否完成。服務器

hexo -v

hexo-cli: 1.1.0
os: Darwin 18.2.0 darwin x64
http_parser: 2.8.0
node: 10.15.3
v8: 6.8.275.32-node.51
uv: 1.23.2
zlib: 1.2.11
ares: 1.15.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0j
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e
複製代碼

初始化博客工程

hexo init blog
cd blog
複製代碼

安裝NexT主題

咱們這裏選取了NexT主題替換默認的landscape主題，固然你徹底可使用默認的landscape主題，或者根據本身的喜愛選擇其餘主題。安裝主題的方式很是簡單，只須要將主題文件克隆至工程目錄的 themes目錄下， 而後修改下配置文件_config.yml便可。

在工程目錄下克隆最新版本的next主題

cd blog
git clone https://github.com/iissnan/hexo-theme-next themes/next
複製代碼

修改根目錄下_config.yml配置文件，找到theme字段，將landscape改成next。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape
複製代碼

修改成

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
複製代碼

執行hexo server，啓動本地服務器。

hexo server
複製代碼

訪問網址http://localhost:4000/即可以看到使用next主題的博客網站的樣子了。

avatar

將本地hexo工程鏈接到git遠端倉庫

咱們用前面創建的hexo-test和blog兩個工程作演示。其中本地hexo爲blog目錄，hexo-test爲git遠端倉庫，咱們須要將本地blog目錄裏的文件提交到遠端的hexo-test倉庫。

首先，咱們以前提交的index.html文件，咱們再也不須要了，先刪除它。

cd hexo-test
rm -rf index.html
git add .
git commit -m 'remove index.html'
git push origin master
複製代碼

blog目錄git初始化

cd blog
git init
複製代碼

此時咱們看到next目錄沒法直接提交，這是由於next目錄是一個子模塊(submodule)

avatar
咱們須要刪除next目錄下的.git文件，next目錄變成一個普通文件夾，這樣它就能夠直接提交了。 進入next目錄，執行rm -rf .git命令 

cd themes/next/
rm -rf .git
複製代碼

此時next目錄就能夠直接提交了

在這裏插入圖片描述
執行如下命令就能夠將blog目錄裏的內容提交到遠端的hexo-test倉庫了 

git add .
git commit -m 'init'
git remote add origin git@github.com:mfaying/hexo-test.git
git push -f origin master 
複製代碼

注意，這裏個人本地電腦和遠端的git已經配置過ssh了，因此提交的時候不會出現權限問題。若是你鏈接的是本身的遠端倉庫，能夠查找下如何進行git的ssh配置。

部署

部署咱們須要建一個前面提到的開通GitHub Pages功能的工程，這個專門放置部署的靜態文件，咱們將該工程命名爲hexo-test-deploy(如果發佈到hexo-test工程上遠端的源代碼會被部署的靜態文件覆蓋掉)。這時hexo-test其實就不須要開通GitHub Pages功能了，並且hexo-test也能夠設置成私有工程以免源代碼被查看。

最後咱們須要配置部署路徑，修改文件_config.yml的deploy字段以下：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
 type: git
 repo: git@github.com:mfaying/hexo-test-deploy.git #你的GitHub Pages的倉庫地址
 branch: master
複製代碼

咱們須要先安裝hexo-deployer-git依賴包才能執行hexo deploy命令部署網站

npm install hexo-deployer-git --save 
複製代碼

執行如下命令

hexo clean # 簡寫hexo c，清除緩存文件(db.json)和已生成的靜態文件(public)
hexo generate # 簡寫hexo g，生成靜態文件
hexo deploy # 簡寫hexo d，部署
複製代碼

其中hexo g和hexo d能夠合併寫成hexo d -g 如今咱們訪問以前的連接 mfaying.github.io/hexo-test-d…

avatar

至此，咱們其實已經完成靜態博客網站的建設，後續咱們將介紹一些功能和方法，使網站功能更加完備。

博客網站功能完善

這節咱們只會介紹幾個完善網站功能的方法，若是你還想增長其餘功能，能夠通讀NexT 使用文檔、文檔|hexo，根據本身的須要來增長功能。

設置語言

修改站點配置文件(_config.yml)的language字段，好比設置爲簡體中文

language: zh-Hans
複製代碼

此時頁面變爲

在這裏插入圖片描述

設置菜單

修改主題配置文件(/themes/next/_config.yml)的menu字段

menu:
 home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
 archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
複製代碼

修改成

menu:
 home: / || home
  #about: /about/ || user
 tags: /tags/ || tags
 categories: /categories/ || th
 archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
複製代碼

建立tags頁面

hexo new page "tags"
複製代碼

編輯/source/tags/index.md文件爲

---
title: tags
date: 2019-10-05 16:02:39
type: "tags"
comments: false ---
複製代碼

建立categories頁面

hexo new page "categories"
複製代碼

編輯/source/categories/index.md文件爲

---
title: categories
date: 2019-10-05 15:59:54
type: "categories"
comments: false ---
複製代碼

配置根路徑爲

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://mfaying.github.io/hexo-test-deploy
root: /hexo-test-deploy/
permalink: :year/:month/:day/:title/
permalink_defaults:
複製代碼

訪問頁面以下

avatar

建立一篇文章

執行命令建立一篇文章

hexo new '測試文章'
複製代碼

咱們發如今source/_posts/目錄下生成了測試文章.md，編輯內容以下

---
title: 文章測試
date: 2019-10-05 16:20:04
tags:
 - hexo
categories: 其餘 ---
這是摘要
<!-- more -->
如下是正文
# 標題1
1
## 標題2
2
複製代碼

部署後能夠發現一篇文章建立成功了。

在這裏插入圖片描述

push時自動部署

咱們藉助git的鉤子實如今本地代碼推送到遠端時自動部署網站。

首先安裝husky開發環境依賴包

npm install husky --save-dev
複製代碼

修改根目錄package.json文件以下

"scripts": {
  "publish": "hexo clean && hexo d -g"
},
"husky": {
  "hooks": {
    "pre-push": "npm run publish"
  }
},
複製代碼

此時執行命令

git add .
git commit -m '自動部署'
git push origin master
複製代碼

咱們會發如今代碼提交時，自動執行了hexo clean && hexo d -g部署命令。

至此，咱們使用hexo和github搭建靜態博客網站的內容已經介紹完畢了，hexo其實還有不少至關多的功能可使用，好比閱讀人數統計、評論功能等等，你還能夠根據本身的想法去修改源碼完善本身的博客。

參考

  1. 文檔|hexo
  2. hexo
  3. NexT 使用文檔
    在這裏插入圖片描述
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程