免費個人博客搭建詳解

免費個人博客搭建思維導(dǎo)圖

作者：李旺成

時間：2016年4月27日

個人博客效果圖

一、技術(shù)選型

常見個人博客搭建方案

搭建個人博客通常有如下選擇：

WorkPress：

WorkPress

GitHubPages + Jekyll：

GitHubPages+Jekyll

GitHubPages + Hexo：

GitHubPages+Hexo

選擇 GitHubPages + Hexo

上面提到的三種個人博客搭建方案，在對這三個方案做了簡單的了解之后，我選擇了 GitHubPages + Hexo。主要是出于以下幾點考慮：

  • WorkPress：一般需要獨立域名（收費），對 MarkDown 不友好
  • GitHubPages + Jekell：免費，稍微有點麻煩
  • GitHubPages + Hexo：免費，使用簡單，使用者眾多...

Hexo 簡介

Hexo 是一個基于 Nodejs 的靜態(tài)博客網(wǎng)站生成器，作者是來自臺灣的 Tommy Chen(https://zespia.tw/)

特點：

  • 不可思議的快速 ─ 只要一眨眼靜態(tài)文件即生成完成
  • 支持 Markdown
  • 僅需一道指令即可部署到 GitHub Pages 和 Heroku
  • 已移植 Octopress 插件
  • 高擴展性、自訂性
  • 兼容于 Windows, Mac & Linux

二、博客搭建

跟著我做，簡簡單單5-7分鐘你即可擁有自己的個人博客。開始吧！

創(chuàng)建 GitHub 倉庫

注冊/登錄

如果沒有帳號，前往 GitHub 頁面完成注冊：

  1. 用戶名
  2. 郵箱地址
  3. 密碼
  4. Create an account

登錄
如果有賬號，前往 GitHub 頁面登錄：

  1. 用戶名或郵箱地址
  2. 密碼
  3. Sign in

創(chuàng)建倉庫

直接看圖操作：

創(chuàng)建倉庫：步驟一
創(chuàng)建倉庫：步驟二

”步驟二“中，注意 Respository name 中一定要輸入：你的用戶名.github.io。其他地方不用修改，然后直接點 ”Create repository“ 按鈕完成創(chuàng)建即可。

本地環(huán)境準備

Git 安裝

Windows 中

1、下載 Git
打開 Git 官網(wǎng)，選擇 Downloads 下面的 Windows（按照你的系統(tǒng)選擇 32 位或者 64 位）?？紤]到可能受網(wǎng)絡(luò)環(huán)境影響，我已經(jīng)把 Git 上傳到網(wǎng)盤分享出來了，點這里去網(wǎng)盤。

2、安裝 Git
雙擊安裝文件 -> 下一步 -> 下一步...
沒有特殊要求的直接下一步即可，不用去修改默認選項。

Mac OS 中

話說 Mac 上的 XCode 自帶了 Git。（汗！沒裝 XCode 怎么破）
1、下載 Git
打開 Git 官網(wǎng)，選擇 Downloads 下面的 Mac OS X。Mac版的 Git 也上傳到網(wǎng)盤分享出來了，點這里去網(wǎng)盤。
2、安裝 Git
直接雙擊 dmg 文件安裝即可。

Nodejs安裝

Windows 中

1、下載 Nodejs
打開 Nodejs 下載頁面，選擇合適你當前系統(tǒng)版本的安裝包。這里建議使用 LTS 版本的，當前的是 v4.4.3。我已經(jīng)把 Windows 32/64 位的安裝包都提交到網(wǎng)盤了，你可以直接從網(wǎng)盤下載，點這里去網(wǎng)盤。

2、安裝 Nodejs
雙擊安裝文件 -> 下一步 -> 下一步...

Mac OS 中

1、下載 Nodejs
打開 Nodejs 下載頁面，選擇 Macintosh Installer 即可開始下載。網(wǎng)盤里面也上傳了，點這里去網(wǎng)盤。

2、安裝 Nodejs
直接雙擊 pkg 文件安裝即可。

說明： Nodejs 也可以使用 nvm（Nodejs版本管理器）來安裝，步驟如下：
**1、安裝 nvm **

  1. 通過 brew 安裝
    $ brew install nvm
    $ mkdir ~/.nvm
    $ export NVM_DIR=~/.nvm
    $ . $(brew --prefix nvm)/nvm.sh
    $ source ~/.nvm/nvm.sh // 使配置生效

  2. 使用 curl 安裝
    $ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
    $ source ~/.nvm/nvm.sh // 使配置生效

2、安裝 Nodejs 4
$ nvm install 4

Hexo 安裝

Hexo 是今天的主角，先打開 Hexo 官網(wǎng)。

Hexo官網(wǎng)

對，如上圖所示，就一條命令，很簡單有沒有。

Windows 中

1、打開命令行
win+R，輸入 cmd，回車

2、輸入命令

npm install hexo-cli -g

Mac OS 中

1、打開終端
不要問我終端在哪里...

2、輸入命令

$ npm install hexo-cli -g

創(chuàng)建本地博客

Windows 中

1、打開命令行，定位到你希望放置博客的位置

定位到目標目錄

2、輸入命令

hexo init 你的用戶名.github.io  // 建議和創(chuàng)建倉庫時使用同一個

Mac OS 中

1、打開終端，定位到你希望放置博客的位置

Mac上定位到指定目錄

2、輸入命令

$ hexo init 你的用戶名.github.io  // 建議和創(chuàng)建倉庫時使用同一個

Next 安裝

經(jīng)過上面步驟創(chuàng)建完本地博客之后，基本的博客系統(tǒng)就已經(jīng)搭建好了，自帶了 landscape 主題。不過該主題不是很符合我的審美，在網(wǎng)上搜索了一下 Hexo 主題，選擇了用戶量較大的 Next。

Next 是 iissnan 在 GitHub 上開源的一個 Hexo 主題，主打簡潔。選擇該主題有如下原因：

  • 簡潔，美觀
  • 功能齊全
  • 使用者眾多
  • 文檔齊全

”說明：“在 Hexo 中有兩份主要的配置文件，其名稱都是 _config.yml
。 其中，一份位于站點根目錄下（即 xxx.github.io 目錄下），主要包含 Hexo 本身的配置；另一份位于主題目錄下，這份配置有主題作者提供，主要用于配置主題相關(guān)的選項。為了描述方便，在以下說明中，將前者稱為 “站點配置文件”， 后者稱為 “主題配置文件”。

看下怎么安裝主題：

1、切換到上面生成的本地博客目錄（xxx.github.io）

切換到本地博客目錄

Mac OS 的終端上類似，把 dir 替換為 ls 即可。

2、安裝 Next 主題

git clone https://github.com/iissnan/hexo-theme-next themes/next
或在 Mac 上
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

3、使用 Next 主題
首先，復(fù)制一份打開本地博客目錄下的 _config.yml 文件，命名為 _config_bak.yml，做為備份，以防改錯
然后，使用文本編輯器打開本地博客目錄下的 _config.yml 文件，搜索，定位 theme 鍵值，將 theme 的值修改為 next

theme: next //剛剛安裝的主題名稱

注意：該配置文件中的鍵值之間一定要有空格，否則輕則沒有作用，重則報錯，無法啟動。

4、站點配置文件基本項修改
關(guān)于 Hexo 配置的詳細信息請前往 Hexo的官方文檔。

這里先看看最基礎(chǔ)的配置，也就是必須要改動的：

title: xxx  # 博客的名字，也稱站點名稱

author: xxx # 作者名字

description: xxx # 對站點的描述，搜索引擎會抓取，可以自定義（這個還是加上比較好）

language: zh-Hans # 語言 簡體中文

theme: next  # 配置主題

deploy: # 部署相關(guān)配置
    type: git # 使用 Git 提交
    repo: https://github.com/xxx/xxx.github.io.git # 就是存放博客的倉庫地址

上述配置是必須要修改的，再次強調(diào)，鍵值之間一定要 ”加空格“，請在文本編輯器中搜索定位后再修改。

站點配置文件詳細配置示例

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

# Site 這里的配置，哪項配置反映在哪里，可以參考我的博客
title: xxx # 博客的名字，也稱站點名稱
subtitle: xxx # 副標題
description: xxx # 對站點的描述，搜索引擎會抓取，可以自定義
author: xxx # 作者名字
language: zh-Hans # 語言 簡體中文
timezone:  # 用默認的即可

# URL 
# 這項暫時不需要配置，綁定域名后，要創(chuàng)建 sitemap.xml 時再配置該項
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: # http://xxx.com
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:
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: MMM D YYYY
time_format: H:mm:ss

# Pagination 
# 每頁顯示文章數(shù)，可以自定義
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions 
# 配置站點所用主題和插件，這里將默認主題注釋，修改為 next
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
#theme: landscape

# 頭像
# 注意：是 xxx.github.io/source 下的開始的相對路徑，如果 source 文件夾下面沒有 uploads 文件夾，那么新建一個?？紤]到會博客中用很多圖片，在 uploads 文件夾下請分好類，避免混亂
avatar: /uploads/images/avatar.jpg

# Deployment 
# 本地博客部署到 github 上要配置這里
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git # 使用 Git 提交
  repository: https://github.com/xxx/xxx.github.io.git # 就是存放博客的倉庫地址

PS：是不是有點迫不及待想看看效果了，那好，先在本地跑起來試試，步驟如下：

  1. 打開命令行，定位到 xxx.github.io 目錄
  2. 輸入命令：
hexo s # == hexo server #啟動服務(wù)預(yù)覽
$ hexo s

  1. 啟動成功可以看到提示，按照提示用瀏覽器打開提示網(wǎng)址，即可看到你的本地博客了，里面有一篇 Hello World


    hexo s 命令成功提示

看完效果之后繼續(xù)學(xué)習(xí)下面的內(nèi)容...

三、Next 配置

當然，最權(quán)威的是看官方的說明文檔，我在這里提供一個示例，供大家參考，你可以直接拷過去稍微改動一點就行。

Next 配置詳解

Next 配置就是上面所說的”主題配置文件“，位于 xxx.github.io/themes/next 目錄下，文件名為 _config.yml。老規(guī)矩，先備份一份 ”_config_bak.yml“，以防改錯。

以我的博客為例，闡述一下需要配置的地方：

# Set default keywords (Use a comma to separate)
# 設(shè)置關(guān)鍵字
keywords: "Android, DIY"

# Specify the date when the site was setup
# 設(shè)置博客開始時間
since: 2016

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
# 設(shè)置菜單，就是[我的博客](http://diy-green.github.io)左側(cè)那一列
menu:
  home: / # 在菜單上顯示首頁
  archives: /archives # 在菜單刪顯示全部
  categories: /categories # 在菜單上顯示 分類
  tags: /tags # 在菜單上顯示 標簽
  about: /about # 在菜單上顯示 關(guān)于
  #commonweal: /404.html

# Schemes
# 設(shè)置風(fēng)格
#scheme: Muse
#scheme: Mist
scheme: Pisces # 我的就是這個雙欄風(fēng)格

# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true # 設(shè)置是否顯示閱讀全文，文章較多的話，有必要設(shè)置為 true
  length: 150

# 一些第三方服務(wù)設(shè)置，這里只提一下”多說“，其他的請參考官方介紹
# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
  ua_enable: true
  admin_enable: true
  user_id: 0 # **這里不要動，千萬別動**
  admin_nickname: DIY-green

# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
#highlight_theme: normal
# 代碼高亮主題
highlight_theme: night eighties

# 打賞配置
# 打賞說明文本
reward_comment: 堅持原創(chuàng)技術(shù)分享，您的支持將鼓勵我繼續(xù)創(chuàng)作！
# 微信收款二維碼
wechatpay: /uploads/images/wechat-reward-image.png
# 支付寶收款二維碼
alipay: /uploads/images/alipay-reward-image.png

# 友情鏈接
links_title: Links
links:
  DIY-green簡書: http://www.itdecent.cn/users/0ad0a0afc409/latest_articles


# 訂閱微信公眾號
# Wechat Subscriber
#wechat_subscriber:
#  enabled: true
#  qcode: /uploads/wechat-qcode.jpg
#  description: 歡迎您掃一掃上面的微信公眾號，訂閱我的博客！

創(chuàng)建分類頁面

先看下添加了分類的效果：

分類頁面效果

操作步驟

  1. 打開命令行，定位到 xxx.github.io 目錄
  2. 新建一個頁面，命名為 categories
hexo new page categories
或
$ hexo new page categories
  1. 根據(jù)提示找到新建的 index.md 文件，編輯
# 這里有 "---"（這會破壞代碼展示效果，所以注釋了）
title: All tags 
date: 2016-04-25 11:45:45
type: "categories" # 將頁面的類型設(shè)置為 categories
 ，主題將自動為這個頁面顯示所有分類
comments: false # 如果有啟用多說 或者 Disqus 評論，默認頁面也會帶有評論。需要關(guān)閉的話，設(shè)置為 false
# 這里也有 "---"

創(chuàng)建標簽云頁面

先看下添加了標簽云的效果：

標簽云頁面效果

操作步驟

  1. 打開命令行，定位到 xxx.github.io 目錄
  2. 新建一個頁面，命名為 tags
hexo new page "tags"
或
$ hexo new page "tags"
  1. 根據(jù)提示找到新建的 index.md 文件，編輯
# 這里有 "---"
title: All tags 
date: 2016-04-27 08:56:40
type: "tags" # 將頁面的類型設(shè)置為 tags
 ，主題將自動為這個頁面顯示標簽云
comments: false # 如果有啟用多說 或者 Disqus 評論，默認頁面也會帶有評論。需要關(guān)閉的話，設(shè)置為 false
# 這里也有 "---"

注意事項

  1. 格式
    再次強調(diào)，設(shè)置項的鍵值之間一定要有空格
  2. 菜單上顯示 ”分類“ 等欄目
    如果需要在菜單上顯示 ”分類“ 和 ”標簽“ 等，那么記得打開注釋，或者添加該條目
  3. 關(guān)于第三方服務(wù)的 ”duoshuo_info“
    在配置該項的時候，user_id 鍵對應(yīng)的值不要修改，也就是保持為 0，具體原因我不清楚，如果修改了該值，那么你的博客會變得一片空白
  4. 分類和標簽云頁面
    首先，要使用” hexo new page “命令生成這兩個頁面，否則報404。其次，這兩個頁面是主題自動維護的，只要我們的文章按照規(guī)矩來就行了，下面會詳細說明

四、寫博客與發(fā)布

經(jīng)過上述步驟，本地博客和主題設(shè)置已經(jīng)完成，那么接下來就是寫博客了。

你的博客文件需要存放到 xxx.github.io/source/_posts 文件夾中，在該文件夾下面你可以按照你的博客分類建立一系列的文件夾來管理博客原文件。

操作步驟

1、用 Markdown 寫文章
不管你用什么編輯 Markdown 文件，最后生成的 md 文件放到 xxx.github.io/source/_posts 文件夾或其子文件夾中即可，如：

---
title: 個人博客搭建詳解（Windows和Mac通用版） # 這是標題
categories:  # 這里寫的分類會自動匯集到 categories 頁面上，分類可以多級
- 實用技術(shù) # 一級分類
- 個人博客 # 二級分類 
tags:   # 這里寫的標簽會自動匯集到 tags 頁面上
- 實用 # 可配置多個標簽，注意格式
- 個人博客
---

>Hexo 是一個基于nodejs 的靜態(tài)博客網(wǎng)站生成器，作者是來自臺灣的 Tommy Chen

注意：分類和標簽是自動維護的，關(guān)鍵是的文章要按照規(guī)定的格式寫，如上格式，可以參考。

說明：Next 主題會自動生成目錄，這也省了不少事。

2、在本地運行測試
打開命令行定位到 xxx.github.io 目錄，輸入命令：

hexo s # 這是簡寫 == hexo server # 啟動服務(wù)預(yù)覽
或
$ hexo s

3、在瀏覽器查看效果
在瀏覽器中輸入 http://localhost:4000 訪問本地博客，看看效果吧

4、安裝自動部署發(fā)布工具
這里用到了 hexo-deployer-git，使用如下命令安裝：

npm install hexo-deployer-git --save
或
$ npm install hexo-deployer-git --save

**5、發(fā)布到 GitHubPages **
確認在本地上顯示無誤之后，就可以將 md 轉(zhuǎn)為 靜態(tài)網(wǎng)頁文件，然后發(fā)布到 GitHubPages 上去了。

hexo clean #清除緩存 網(wǎng)頁正常情況下可以忽略此條命令
hexo g #生成靜態(tài)網(wǎng)頁
hexo d #開始部署

也可以一次性執(zhí)行
hexo clean && hexo g && hexo d

如果是第一次部署，終端會提示要求輸入用戶名和密碼。等命令執(zhí)行完之后，過幾分鐘打開 http://xxx.github.io 即可看到你的個人博客了。以后要發(fā)布新文章，執(zhí)行上述命令即可。

注意事項

  1. Git 的 bug
    有個老版本的 Git 有個 bug，上傳的時候會提示非法域名這類的，要解決該問題，最簡單的方法就是更新 Git，用最新版的 Git
  2. 關(guān)于頁面空白
    主題配置文件中的 ”duoshuo_info“ 下的 ”user_id“ 如果是非 ”0“，會導(dǎo)致該問題
  3. 特殊字符導(dǎo)致報錯
    如添加新博客的時候報錯了，而且提示的是 js 中某些地方報錯，那么很可能是 md 文件中存在特殊字符（不是正常顯示的字符，不是說特殊符號，能正常顯示的都不是這里說的特殊字符），把特殊字符刪除即可
  4. Hexo 命令的常見報錯
    可以參考這篇文章：HEXO+Github,搭建屬于自己的博客
  5. 使用hexo，如果換了電腦怎么更新博客？
    這個問題相信大家都關(guān)心，知乎上有比較詳細的解答。我說一下我的解決方法吧！
    方案一：
    在新電腦上配置好本地博客環(huán)境，然后，直接拷貝原電腦上的 xxx.github.io 文件夾到新電腦上即可。
    方案二：
    將 xxx.github.io 文件夾同步到網(wǎng)上(如：Dropbox 等)，其他任何電腦（配置好了本地博客環(huán)境）要用的時候，從網(wǎng)上同步下來即可。

五、更多資源

Markdown 編輯器

Markdown語法參考

Markdown 語法說明(簡體中文版)
Markdown——入門指南
markdown寫作中的常見問題

提示：更簡單的學(xué)習(xí)方法上是直接用示例修改，可參考：作業(yè)部落 或者
馬克飛象 的示例文稿。

思維導(dǎo)圖

Hexo 相關(guān)資料

Hexo官網(wǎng)
hexo常用命令筆記

Next 相關(guān)資料

hexo-theme-next
Next 使用文檔

更多主題

Hexo Themes
有哪些好看的 Hexo 主題？

綁定頂級域名

GitHub Pages綁定頂級域名的方法
怎樣將域名綁定到github pages 博客上

第三方服務(wù)

站長工具
百度站長工具
站長之家工具
360云監(jiān)控

數(shù)據(jù)統(tǒng)計
百度統(tǒng)計
不蒜子

說明

更多的配置可以去看看官方文檔，我對我的博客目前的效果已經(jīng)比較滿意。我覺得簡潔就是美，我們應(yīng)該專注內(nèi)容。更多的設(shè)置以及喜歡折騰的朋友自己去百度、Google 吧！

我的個人博客

DIY-green
我的GitHub

參考

WordPress.org
每個人都應(yīng)該有一個Jekyll博客
Hexo Themes
Hexo官網(wǎng)
Hexo官方文檔
GitHub+Hexo+Next搭建免費獨立個人博客
hexo-theme-next
Next主題官方文檔
hexo系列教程：（一）hexo介紹
hexo系列教程：（二）搭建hexo博客
hexo系列教程：（三）hexo博客的配置、使用
玩轉(zhuǎn)hexo博客之next
使用Hexo + Next搭建靜態(tài)博客
hexo
如何使用10個小時搭建出個人域名而又Geek的獨立博客？
傻瓜都可以利用github pages建博客
HEXO+Github,搭建屬于自己的博客
通過GitHub Pages建立個人站點（詳細步驟）
免費頂級TK域名注冊圖文教程+DNS修改！
Freenom免費域名.TK、.CF、.ML、.GA注冊及使用方法
hexo你的博客
5分鐘 搭建免費個人博客
hexo--搭建
如何搭建一個獨立博客——簡明Github Pages與Hexo教程
Hexo服務(wù)器端布署及Dropbox同步

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容