blog-engine-01-常見博客引擎 jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman 對比[1]
blog-engine-02-通過博客引擎 jekyll 構建 github pages 博客實戰筆記[2]
blog-engine-02-博客引擎jekyll-jekyll 博客引擎介紹[3]
blog-engine-02-博客引擎jekyll-jekyll 如何在 windows 環境安裝,官方文檔[4]
blog-engine-02-博客引擎jekyll-jekyll SEO[5]
blog-engine-04-博客引擎 hugo intro 入門介紹+安裝筆記[6]
blog-engine-05-博客引擎 Hexo 入門介紹+安裝筆記[7]
blog-engine-06-pelican 靜態網站生成 官方文檔[8]
blog-engine-06-pelican 靜態網站生成 windows 安裝實戰[9]
blog-engine-07-gatsby 建極速網站和應用程序 基于React的最佳框架,具備性能、可擴展性和安全性[10]
blog-engine-08-vuepress 以 Markdown 為中心的靜態網站生成器[11]
blog-engine-09-nuxt 構建快速、SEO友好和可擴展的Web應用程序變得輕松[12]
blog-engine-10-middleman 靜態站點生成器,利用了現代 Web 開發中的所有快捷方式和工具[13]
由于個人一直喜歡使用 markdown 來寫 個人博客[14],最近就整理了一下有哪些博客引擎。
感興趣的小伙伴也可以選擇自己合適的。
Hexo[15] is a fast, simple & powerful blog framework.
一直使用的是 jekyll[16],文章越寫越多,不太好管理。是時候換個博客嘗試一下。
blog zh_CN[17]
本機為 MAC。不同系統會略有不同,但是大同小異。
?Node.js[18]
必須。
作用:用來生成靜態頁面的。
houbinbindeMacBook-Pro:~ houbinbin$ node -v
v6.2.2
?Git[19]
必須。
作用:代碼倉庫管理。
houbinbindeMacBook-Pro:~ houbinbin$ git --version
git version 2.8.1
?Github[20]
申請個賬號。我相信你應該知道。
?下載安裝 hexo
找一個你想放置blog的文件夾,執行:
sudo npm install -g hexo-cli
實際操作:
houbinbindeMacBook-Pro:fork houbinbin$ pwd
/Users/houbinbin/it/fork
houbinbindeMacBook-Pro:fork houbinbin$ npm install -g hexo-cli
fetchMetadata → network 。。。。
?測試
等待下載完成。輸入命令 hexo
houbinbindeMacBook-Pro:fork houbinbin$ hexo
Usage: hexo <command>
Commands:
help Get help on a command.
init Create a new Hexo folder.
version Display version information.
Global Options:
--config Specify config file instead of using _config.yml
--cwd Specify the CWD
--debug Display all verbose messages in the terminal
--draft Display draft posts
--safe Disable all plugins and scripts
--silent Hide output on console
For more help, you can use 'hexo help [command]' for the detailed information
or you can check the docs: http://hexo.io/docs/
?初始化博客
// 建立一個博客文件夾,并初始化博客,<folder>為文件夾的名稱,可以隨便起名字
$ hexo init <folder>
// 進入博客文件夾,<folder>為文件夾的名稱
$ cd <folder>
// node.js的命令,根據博客既定的dependencies配置安裝所有的依賴包
$ npm install
此處為了方便, 直接使用 XXX.github.io 命名。 實際操作
houbinbindeMacBook-Pro:fork houbinbin$ hexo init ryo.github.io
INFO Cloning hexo-starter to ~/IT/fork/ryo.github.io
Cloning into '/Users/houbinbin/IT/fork/ryo.github.io'...
remote: Counting objects: 53, done.
remote: Total 53 (delta 0), reused 0 (delta 0), pack-reused 53
Unpacking objects: 100% (53/53), done.
Checking connectivity... done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into 'themes/landscape'...
remote: Counting objects: 764, done.
remote: Total 764 (delta 0), reused 0 (delta 0), pack-reused 764
Receiving objects: 100% (764/764), 2.53 MiB | 130.00 KiB/s, done.
Resolving deltas: 100% (390/390), done.
Checking connectivity... done.
Submodule path 'themes/landscape': checked out 'decdc2d9956776cbe95420ae94bac87e22468d38'
INFO Install dependencies
npm WARN deprecated swig@1.4.2: This package is no longer maintained
npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN prefer global marked@0.3.6 should be installed with -g
> fsevents@1.1.1 install /Users/houbinbin/IT/fork/ryo.github.io/node_modules/fsevents
> node install
[fsevents] Success: "/Users/houbinbin/IT/fork/ryo.github.io/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
> dtrace-provider@0.8.1 install /Users/houbinbin/IT/fork/ryo.github.io/node_modules/dtrace-provider
> node scripts/install.js
新開一個窗口
houbinbindeMacBook-Pro:blog houbinbin$ pwd
/Users/houbinbin/it/fork/ryo.github.io
houbinbindeMacBook-Pro:blog houbinbin$ npm install
houbinbindeMacBook-Pro:blog houbinbin$ ls
_config.yml node_modules package.json scaffolds source themes
類似 jekyll,需要修改 _config.yml文件。
修改網站相關信息
title: echo blog
subtitle: the blog of ryo
description: One Echo, Endless Miss
author: ryo
language: zh-CN
timezone: Asia/Shanghai
配置統一資源定位符(個人域名)
url: https://ryo.github.io
對于root(根目錄)、permalink(永久鏈接)、permalink_defaults(默認永久鏈接)等其他信息保持默認。
配置部署
deploy:
type: git
repo: https://github.com/houbb/ryo.github.io.git
branch: master
?新建一篇文章
// 新建一篇文章
hexo new "文章標題"
實際:
houbinbindeMacBook-Pro:ryo.github.io houbinbin$ hexo new "helloworld"
INFO Created: ~/IT/fork/ryo.github.io/source/_posts/helloworld.md
?啟動服務
hexo server
實際
houbinbindeMacBook-Pro:ryo.github.io houbinbin$ hexo server
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
$ hexo generate
$ hexo deploy
前面的 deploy 已經指定了其對應的 github 倉庫。你可以在github上創建一個 XXX.github.io 項目,或者使用其他方式。
其中 XXX 是你的github用戶名。我以前使用 jekyll 已經占用一個了。此處先演示本地。
實際操作:
houbinbindeMacBook-Pro:ryo.github.io houbinbin$ hexo generate
INFO Start processing
INFO Files loaded in 177 ms
INFO Generated: index.html
INFO Generated: archives/index.html
INFO Generated: fancybox/blank.gif
INFO Generated: fancybox/jquery.fancybox.css
INFO Generated: fancybox/jquery.fancybox.pack.js
INFO Generated: fancybox/fancybox_loading.gif
INFO Generated: fancybox/jquery.fancybox.js
INFO Generated: fancybox/fancybox_overlay.png
INFO Generated: fancybox/fancybox_loading@2x.gif
INFO Generated: fancybox/fancybox_sprite.png
INFO Generated: fancybox/fancybox_sprite@2x.png
INFO Generated: archives/2017/03/index.html
INFO Generated: archives/2017/index.html
INFO Generated: css/fonts/FontAwesome.otf
INFO Generated: js/script.js
INFO Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO Generated: css/style.css
INFO Generated: css/fonts/fontawesome-webfont.woff
INFO Generated: fancybox/helpers/jquery.fancybox-media.js
INFO Generated: css/fonts/fontawesome-webfont.eot
INFO Generated: fancybox/helpers/fancybox_buttons.png
INFO Generated: css/images/banner.jpg
INFO Generated: css/fonts/fontawesome-webfont.svg
INFO Generated: css/fonts/fontawesome-webfont.ttf
INFO Generated: 2017/03/29/hello-world/index.html
INFO 28 files generated in 656 ms
Deployer not found
解決方式 npm install hexo-deployer-git --save
houbinbindeMacBook-Pro:ryo.github.io houbinbin$ hexo deploy
ERROR Deployer not found: github
houbinbindeMacBook-Pro:ryo.github.io houbinbin$ npm install hexo-deployer-git --save
hexo-site@0.0.0 /Users/houbinbin/IT/fork/ryo.github.io
`-- hexo-deployer-git@0.2.0
重新運行
houbinbindeMacBook-Pro:ryo.github.io houbinbin$ hexo deploy
INFO Deploying: git
INFO Setting up Git deployment...
Initialized empty Git repository in /Users/houbinbin/IT/fork/ryo.github.io/.deploy_git/.git/
[master (root-commit) 29675e7] First commit
1 file changed, 0 insertions(+), 0 deletions(-)
create mode 100644 placeholder
INFO Clearing .deploy_git folder...
INFO Copying files from public folder...
[master 02b7255] Site updated: 2017-03-29 23:17:16
29 files changed, 5793 insertions(+)
create mode 100644 2017/03/29/hello-world/index.html
create mode 100644 archives/2017/03/index.html
create mode 100644 archives/2017/index.html
create mode 100644 archives/index.html
create mode 100644 css/fonts/FontAwesome.otf
create mode 100644 css/fonts/fontawesome-webfont.eot
create mode 100644 css/fonts/fontawesome-webfont.svg
create mode 100644 css/fonts/fontawesome-webfont.ttf
create mode 100644 css/fonts/fontawesome-webfont.woff
create mode 100644 css/images/banner.jpg
create mode 100644 css/style.css
create mode 100644 fancybox/blank.gif
create mode 100644 fancybox/fancybox_loading.gif
create mode 100644 fancybox/fancybox_loading@2x.gif
create mode 100644 fancybox/fancybox_overlay.png
create mode 100644 fancybox/fancybox_sprite.png
create mode 100644 fancybox/fancybox_sprite@2x.png
create mode 100644 fancybox/helpers/fancybox_buttons.png
create mode 100644 fancybox/helpers/jquery.fancybox-buttons.css
create mode 100644 fancybox/helpers/jquery.fancybox-buttons.js
create mode 100644 fancybox/helpers/jquery.fancybox-media.js
create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.css
create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.js
create mode 100644 fancybox/jquery.fancybox.css
create mode 100644 fancybox/jquery.fancybox.js
create mode 100644 fancybox/jquery.fancybox.pack.js
create mode 100644 index.html
create mode 100644 js/script.js
delete mode 100644 placeholder
To https://github.com/houbb/ryo.github.io.git
+ 921a4a1...02b7255 HEAD -> master (forced update)
Branch master set up to track remote branch master from https://github.com/houbb/ryo.github.io.git.
INFO Deploy done: git
?安裝 Node(必須)
官方 https://nodejs.org/en/ 下載安裝即可。
node -v
v12.16.2
?git 安裝
git --version
git version 2.24.0.rc1.windows.1
?github 申請
?安裝 hexo
npm install -g hexo-cli
?初始化文件夾
$ hexo init itbook52.github.io
$ cd itbook52.github.io
這個目標文件夾必須為空
生成的文件信息
$ ls
_config.yml db.json node_modules/ package.json package-lock.json scaffolds/ source/ themes/
為了更方便的使用,我們修改一下 _config.yml 配置文件。
?原始內容
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks
# 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:
enable: true # Open external links in new tab
field: site # Apply to the whole site
exclude: ''
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: ''
wrap: true
hljs: false
# 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:
# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true
# 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
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: ''
?修改后
主要修改以下三個部分的內容:
title: IT Books
subtitle: the it books
description: 收集常見的 it 書籍,供學習之用
author: ryo
language: zh-CN
timezone: Asia/Shanghai
url: https://itbook52.github.io
deploy:
type: git
repo: https://github.com/itbook52/itbook52.github.io.git
branch: master
?新建博客
hexo new "helloworld"
?啟動
hexo server
通過 http://localhost:4000 可以訪問。
?生成靜態文件
$ hexo generate
?將本地文件與遠程進行管理
git init
git add *
git commit -m "first commit"
git remote add origin https://github.com/itbook52/itbook52.github.io.git
git push -u origin master
?部署
$ hexo deploy
報錯:
ERROR Deployer not found: git
執行
npm install --save hexo-deployer-git
重新執行即可。
主題[21]
hexo-theme-next[22]
hexo-theme-yilia[23]
$ pwd
D:\_github\itbook52.github.io
在 blog 的 themes 目錄下,下載 next 主題。
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
將主題直接下載到對應的 themes\next 目錄下。
配置主題為 next
theme: next
?清空歷史數據
hexo clean
?啟動服務
hexo server
再次訪問即可 http://localhost:4000/
安裝 hexo-generator-searchdb,在站點的根目錄下執行以下命令:
npm install hexo-generator-searchdb --save
編輯站點配置文件,新增以下內容到任意位置:
search:
path: search.xml
field: post
format: html
limit: 10000
啟用本地搜索功能:
# Local search
local_search:
enable: true
INFO Start processing
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Template render error: (unknown path)
Error: expected end of comment, got end of file
hexo 中 {# 屬于吧保留字,會報錯。
將 { 與 # 拆開寫。
[1] blog-engine-01-常見博客引擎 jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman 對比: https://houbb.github.io/2016/04/13/blog-engine-01-overview
[2] blog-engine-02-通過博客引擎 jekyll 構建 github pages 博客實戰筆記: https://houbb.github.io/2016/04/13/blog-engine-02-jekyll-01-install
[3] blog-engine-02-博客引擎jekyll-jekyll 博客引擎介紹: https://houbb.github.io/2016/04/13/blog-engine-03-jekyll-02-intro
[4] blog-engine-02-博客引擎jekyll-jekyll 如何在 windows 環境安裝,官方文檔: https://houbb.github.io/2016/04/13/blog-engine-03-jekyll-03-install-on-windows-doc
[5] blog-engine-02-博客引擎jekyll-jekyll SEO: https://houbb.github.io/2016/04/13/blog-engine-03-jekyll-04-seo
[6] blog-engine-04-博客引擎 hugo intro 入門介紹+安裝筆記: https://houbb.github.io/2016/04/13/blog-engine-04-hugo-intro
[7] blog-engine-05-博客引擎 Hexo 入門介紹+安裝筆記: https://houbb.github.io/2017/03/29/blog-engine-05-hexo
[8] blog-engine-06-pelican 靜態網站生成 官方文檔: https://houbb.github.io/2016/04/13/blog-engine-06-pelican-01-intro
[9] blog-engine-06-pelican 靜態網站生成 windows 安裝實戰: https://houbb.github.io/2016/04/13/blog-engine-06-pelican-02-quick-start
[10] blog-engine-07-gatsby 建極速網站和應用程序 基于React的最佳框架,具備性能、可擴展性和安全性: https://houbb.github.io/2016/04/13/blog-engine-07-gatsby-01-intro
[11] blog-engine-08-vuepress 以 Markdown 為中心的靜態網站生成器: https://houbb.github.io/2016/04/13/blog-engine-08-vuepress-01-intro
[12] blog-engine-09-nuxt 構建快速、SEO友好和可擴展的Web應用程序變得輕松: https://houbb.github.io/2016/04/13/blog-engine-09-nuxt-01-intro
[13] blog-engine-10-middleman 靜態站點生成器,利用了現代 Web 開發中的所有快捷方式和工具: https://houbb.github.io/2016/04/13/blog-engine-10-middleman-01-intro
[14] 個人博客: https://houbb.github.io/
[15] Hexo: https://hexo.io/
[16] jekyll: https://houbb.github.io/2016/04/13/jekyll
[17] blog zh_CN: http://www.jianshu.com/p/465830080ea9
[18] Node.js: https://nodejs.org/
[19] Git: https://git-scm.com/
[20] Github: https://github.com/
[21] 主題: https://github.com/hexojs/hexo/wiki/Themes
[22] hexo-theme-next: https://notes.iissnan.com/
[23] hexo-theme-yilia: http://litten.me/
本項目基于macOS(Windows也同樣適用)
0. 前言
使用github pages服務搭建博客的好處有:
1. 準備工作
brew install git brew install node
cd ~/. ssh #檢查本機已存在的ssh密鑰
ssh - keygen - t rsa - C "郵件地址"
ssh - T git@github . com # 注意郵箱地址不用改
Hi skyls03! You've successfully authenticated, but GitHub does not provide shell access.
看到這個信息說明 SSH 已配置成功! 此時你還需要配置:
git config--globaluser.name"skyls03"# 你的github用戶名,非昵稱
git config--globaluser.email"skyls03@qq.com"# 填寫你的github注冊郵箱
這個是提交的時候的一種身份聲明,說明你是誰。
配置Hexo
官網:http://hexo.io
原理
由于github pages存放的都是靜態文件,博客存放的不只是文章內容,還有文章列表、分類、標簽、翻頁等動態內容,假如每次寫完一篇文章都要手動更新博文目錄和相關鏈接信息,相信誰都會瘋掉,所以hexo所做的就是將這些md文件都放在本地,每次寫完文章后調用寫好的命令來批量完成相關頁面的生成,然后再將有改動的頁面提交到github。
安裝
npm install hexo - cli - g
初始化
cd到你電腦上放博客的位置(必需是空文件夾,注意是否包含隱藏文件),然后再初始化
cd / Users / sky03 / Blog hexo init
然后生成靜態博客文件
hexo g
本地預覽博客
hexo s
在瀏覽器中輸入 http://localhost:4000
如果出現以下畫面就說明成功了!