『Hexo』使用Hexo搭建GitHub博客

『Hexo』使用Hexo搭建GitHub博客


前言:

? 談起這個博客的由來,真的挺不容易的。一年前興奮地買了域名,后來因為很多東西都不具備實現這個模版博客的能力,遂擱置了域名,選擇了簡書。有點笨,這一次也折騰了兩三個晚上,總算把它搭建起來了。


環境準備

  • git搭建 :git教程
  • node.js : node.js download
  • git主要用于將代碼同步到GitHub平臺,node.js主要用到了npm這個包管理器,方便我們快速搭建Hexo環境。
  • 個人的主機環境為:MacOS

注冊Github

  • 我們的主要目的就是把本地的靜態網站托管到GitHub這個平臺上。
  • Tips: 我遇到的一個坑就是,我用的是QQ郵箱注冊,GitHub驗證郵件被攔截了,貌似163郵箱也會攔截。一定要驗證郵箱,否則即使你博客搭建好了,托管到GitHub上面,也會一直404無法打開。

Quick Start

  • 安裝Hexo
sudo npm install hexo-cli -g

Hexo官方文檔:Hexo

  • 利用Hexo初始化一個博客文件夾
hexo init [文件夾]
  • npm install 命令用來安裝模塊到node_modules目錄。
cd [文件夾]            //進入到博客文件夾
npm install           //利用npm install命令安裝模塊node_modules

關于npm的詳細使用,參照文檔,或者npm 模塊安裝機制簡介

至此,一個博客已經搭建好了,但是我們還沒辦法看到它。接下來就利用Hexo命令來啟動我們的博客。

hexo g              //利用Hexo 生成靜態頁面
hexo s              //啟動本地服務

你一定迫不及待想看看這個東西給你帶來了什么樣的驚喜。打開瀏覽器,http://localhost:4000,你就可以看到一個模版博客已經出現在你面前了,雖然這不是你最終想要的,不過也算是讓我們眼前一亮。

命令倒是執行了幾個了,但是我們不知道它到底做了些什么。先來看看吧。

ls      //查看文件目錄, 當然一些隱藏文件無法查看, 沒關系,ls -al即可。

暫時忽略其他文件是干什么的,先看看 _config.yml,這是我博客的設置。

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

# Site
title: Shawenlx                             #博客標題
subtitle:                                   #副標題
description: I love code and share.         #個人描述
author: Liuxi                               #作者名
language: en                                #站點語言,如果是中文,把en替換成zh-CN
timezone:                                   #同步時區

# URL
url: /
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:

# Category & Tag
default_category: uncategorized
category_map: categories
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
theme: next                 #主題模版,搜索 ./themes 文件夾下的主題,此處我用的NexT模版

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/shawenlx/shawenlx.github.io.git
  branch: master

Tips: 當我們著手修改這個文件的時候,字段名以及:后面,切記一定要加一個空格!我一開始也遇到這個問題,執行hexo g命令的時候,就會報錯提示我_config.yml文件無法解析。


將博客托管到Github平臺

  • 創建一個GitHub倉庫,new repository
  • Repository name 欄中,輸入 your user name.github.io,譬如我的GitHub用戶名是shawenlx,所以就建立工程名為:shawenlx.github.io
  • 配置好本地的SSH Key。
  • 擁有了個人的GitHub Pages后,再回到Hexo的_config.yml文件, 參照我的配置保存即可。
deploy:
  type: git
  repo: https://github.com/shawenlx/shawenlx.github.io.git
  branch: master
  • 最后利用hexo命令,將博客推送到Github上。
hexo clean              #推送前,先清除下本地數據庫,防止緩存導致上傳不成功
hexo d -g               #利用這個組合命令,將博客上傳到github上。
  • 當你打開瀏覽器,輸入your_user_name.github.io,就可以看到你托管到平臺上的數據了。

關于博客主題模版

  • 網上有各種各樣的模版,我用的NexT, 參照官方文檔進行配置就可以了。目前博客還在完善,特此記錄本博客的搭建經歷。

關于管理博客內容


最后

以后簡書會同步更新這個博客的內容。

復習本博客鏈接:shawenlx.cn

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容