本篇介紹利用Github和Hexo搭建技術(shù)博客的詳細(xì)過程,以及各種優(yōu)化配置.
- 花了一天時(shí)間,摸索利用Github+hexo,完成博客的搭建.基本上可用了,把搭建過程整理成博客,發(fā)首篇吧.
- 一點(diǎn)體會(huì):建議每個(gè)人都把hexo官網(wǎng)文檔完整看一遍.有助于更好理解,并配置hexo博客.
1.安裝
1.1安裝Git
- Windows：下載并安裝 git.
- Mac：使用
Homebrew, MacPorts或下載 安裝程序 安裝百框。
brew install git
- Linux (Ubuntu, Debian)：
sudo apt-get install git-core
- Linux (Fedora, Red Hat, CentOS)：
sudo yum install git-core
1.2安裝Node.js
安裝 Node.js 的最佳方式是使用 nvm蓝厌。
- cURL:
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
- Wget:
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
- 安裝完成后，重啟終端并執(zhí)行下列命令即可安裝 Node.js宙彪。
$ nvm install 0.10
- 或者您也可以下載 應(yīng)用程序 來安裝憔披。
1.3安裝Hexo
sudo npm install -g hexo-cli
sudo npm install hexo --save
針對(duì)Mac平臺(tái):
若編譯報(bào)錯(cuò),請(qǐng)先到AppStore下載安裝`Xcode`.
安裝完,啟動(dòng)并進(jìn)入 Preferences -> Download -> Command Line Tools -> Install 安裝命令行工具等限。再執(zhí)行上述命令.
1.4安裝Hexo插件
sudo npm install hexo-generator-index --save
sudo npm install hexo-generator-archive --save
sudo npm install hexo-generator-category --save
sudo npm install hexo-generator-tag --save
sudo npm install hexo-server --save
sudo npm install hexo-deployer-git --save
sudo npm install hexo-deployer-heroku --save
sudo npm install hexo-deployer-rsync --save
sudo npm install hexo-deployer-openshift --save
sudo npm install hexo-renderer-marked@0.2 --save
sudo npm install hexo-renderer-stylus@0.2 --save
sudo npm install hexo-generator-feed@1 --save
sudo npm install hexo-generator-sitemap@1 --save
2.創(chuàng)建博客
2.1初始化博客目錄(eg: myblog)
mkdir myblog # 新建 博客文件夾
cd myblog # 切換到 博客文件夾
hexo init # 初始化
sudo npm install # 安裝依賴
- 命令執(zhí)行后,myblog目錄下文件結(jié)構(gòu):
.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
| ├── _drafts
| └── _posts
└── themes
2.2目錄結(jié)構(gòu)說明:
_config.yml
- 網(wǎng)站的 配置 信息，您可以在此配置大部分的參數(shù)芬膝。
package.json
- 應(yīng)用程序的信息精刷。EJS, Stylus 和 Markdown renderer 已默認(rèn)安裝，您可以自由移除蔗候。
package.json
{
"name": "hexo-site",
"version": "",
"private": true,
"hexo": {
"version": ""
},
"dependencies": {
"hexo-renderer-ejs": "*",
"hexo-renderer-stylus": "*",
"hexo-renderer-marked": "*"
}
}
scaffolds
- 模版 文件夾怒允。當(dāng)您新建文章時(shí)，Hexo 會(huì)根據(jù) scaffold 來建立文件锈遥。
scripts
- 腳本 文件夾纫事。腳本是擴(kuò)展 Hexo 最簡(jiǎn)易的方式，在此文件夾內(nèi)的 JavaScript 文件會(huì)被自動(dòng)執(zhí)行所灸。
source
- 資源文件夾是存放用戶資源的地方丽惶。除 _posts 文件夾之外，開頭命名為 _ (下劃線)的文件 / 文件夾和隱藏的文件將會(huì)被忽略爬立。Markdown 和 HTML 文件會(huì)被解析并放到 public 文件夾钾唬，而其他文件會(huì)被拷貝過去。
themes
- 主題 文件夾侠驯。Hexo 會(huì)根據(jù)主題來生成靜態(tài)頁面抡秆。
3.運(yùn)行博客
3.1本地運(yùn)行
- 執(zhí)行以下命令严衬，成功后可訪問
localhost:4000查看效果
hexo server
3.2常用配置命令
hexo new "My New Post" # Create a new post
hexo server # Run server
hexo generate # Generate static files
hexo deploy # Deploy to remote sites
命令簡(jiǎn)寫:
hexo n # new
hexo g # generate
hexo s # server
hexo d # deploy
常用復(fù)合命令：
hexo d -g # 生成加部署
hexo s -g # 預(yù)覽加部署
4.部署到github
4.1 github上新建倉庫:hhstore.github.io
- 注意: 該倉庫必須按照此格式命名: XXXX.github.io
- XXXX 為 github 用戶名
4.2 配置_config.yml
cd myblog
找到_config.yml
更改其中內(nèi)容:
deploy:
type: git
repository: https://github.com/hhstore/hhstore.github.io.git
branch: master
4.3 部署到github:
hexo g
hexo d # 部署到github
> 執(zhí)行上述命令后,產(chǎn)生如下提示:
> Username for 'https://github.com':
> hhstore # 輸入用戶名
>
> Password for 'https://hhstore@github.com':
> XXXXX # 提示輸入用戶密碼.
>
> INFO Deploy done: git # 提示部署成功.
- 若執(zhí)行成功,會(huì)自動(dòng)將public內(nèi)容 同步到 hhstore.github.io 倉庫.
- 若報(bào)錯(cuò):ERROR Deployer not found: git , 執(zhí)行如下命令:
npm install hexo-deployer-git --save
- 上一步,安裝成功后,再次執(zhí)行:
hexo d
4.4 訪問博客
- 若以上步驟無誤,訪問博客地址: http://hhstore.github.io/
5.優(yōu)化博客
5.1綁定域名
cd myblog # 依舊是 博客源目錄
cd source # 切換到 source 文件夾下
touch CNAME # 新建 CNAME 文件
- 在CNAME文件中輸入:
selfrebuild.net
5.2安裝主題
1.安裝
- 安裝pacman主題
git clone https://github.com/A-limon/pacman.git themes/pacman
安裝Next主題
詳細(xì)配置步驟,參考
Next的github項(xiàng)目說明.
cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next
2.啟用
修改你的博客根目錄下的config.yml配置文件中的theme屬性韵卤，將其設(shè)置為pacman檩坚。同時(shí)請(qǐng)?jiān)O(shè)置stylus屬性中的compress值為true着撩。
3.更新
cd themes/pacman
git pull
請(qǐng)先備份你的_config.yml 文件后再升級(jí)
5.3安裝插件
1.安裝
- 添加sitemap和feed插件
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-feed --save
2.啟用
- 修改_config.yml诅福，增加以下內(nèi)容
# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
#sitemap
sitemap:
path: sitemap.xml
5.4配置sitemap(提高搜索引擎收錄效果)
使用hexo提供的插件，方法與添加RSS類似拖叙。
- 安裝sitemap插件到本地：
npm install hexo-generator-sitemap
- 開啟sitemap功能：編輯hexo/_config.yml氓润，添加如下代碼：
plugins:
- hexo-generator-sitemap
- 訪問hexo/public/sitemap.xml即可看到站點(diǎn)地圖。
- 為了提高搜索引擎對(duì)自己站點(diǎn)的收錄效果薯鳍，我們最好手動(dòng)到google和百度等搜索引擎提交sitemap.xml旺芽。
5.5自定義 Next 主題的_config文件
修改文件: themes/next/_config.yml
實(shí)現(xiàn)效果:
- 實(shí)現(xiàn)添加: 標(biāo)簽(tag)頁面
- 實(shí)現(xiàn)添加: 關(guān)于(about)頁面
- 更改導(dǎo)航頭像avatar
- 關(guān)閉自動(dòng)對(duì)文章段落標(biāo)題加標(biāo)號(hào)
- 布局緊湊模式
- 始終顯示右側(cè)導(dǎo)航
- 修改代碼高亮主題為: night eighties
_config.yml完整內(nèi)容:
# when running hexo in a subdirectory (e.g. domain.tld/blog), remove leading slashes ( "/archives" -> "archives" )
menu:
home: /
archives: /archives
categories: /categories
tags: /tags
about: /about
#commonweal: /404.html
# head
avatar: http://www.gravatar.com/avatar/b9b00e66c6b8a70f88c73cb6bdb06787
# Place your favicon.ico to /source directory.
favicon: /favicon.ico
# Set default keywords (Use a comma to separate)
keywords: "Hexo,next"
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml
# Icon fonts
# Place your font into next/source/fonts, specify directory-name and font-name here
# Avialable: default | linecons | fifty-shades | feather
icon_font: default
#icon_font: fifty-shades
#icon_font: feather
#icon_font: linecons
# Code Highlight theme
# Available value: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties
# MathJax Support
mathjax:
# Schemes
scheme: Mist
# Sidebar, available value:
# - post expand on posts automatically. Default.
# - always expand for all pages automatically
# - hide expand only when click on the sidebar toggle icon.
#sidebar: post
sidebar: always
#sidebar: hide
# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true
# Automatically add list number to toc.
# toc_list_number: true
toc_list_number: false
## DO NOT EDIT THE FOLLOWING SETTINGS
## UNLESS YOU KNOW WHAT YOU ARE DOING
# Use velocity to animate everything.
use_motion: true
# Fancybox
fancybox: true
# Static files
vendors: vendors
css: css
js: js
images: images
# Theme version
version: 0.4.3
5.6添加Fork Me On Github
- 添加
Fork Me On Github掛件在博客左上角(右上角).官網(wǎng)可選樣式
1. 拷貝Github掛件樣式代碼如下:
<a ><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/8b6b8ccc6da3aa5722903da7b58eb5ab1081adee/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png"></a>
2. 修改上述代碼中href地址為自己的github地址.
<a >
改為:
<a >
3. 修改hexo主題(這里以Next主題為例,不同主題修改略有差異,請(qǐng)注意)
- 修改文件: themes/next/layout/_layout.swig
- 打開_layout.swig文件,找到如下對(duì)應(yīng)位置,添加上述樣式代碼段即可.
<!doctype html>
<html class="theme-next {% if theme.use_motion %}use-motion{% endif %} {% if theme.scheme %}theme-next-{{ theme.scheme | lower }}{% endif %}">
<head>
{% include '_partials/head.swig' %}
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% include '_partials/old-browsers.swig' %}
<div class="container one-column {% block page_class %}{% endblock %}">
<div class="headband"></div>
<!----------- add Fork me on Github ------------>
<a ><img style="position: absolute; top: 500; left: 0; border: 0;" src="https://camo.githubusercontent.com/8b6b8ccc6da3aa5722903da7b58eb5ab1081adee/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png"></a>
<!----------- add Fork me on Github ------------>
<div id="header" class="header">
<div class="header-inner">
{% include '_partials/header.swig' %}
</div>
</div>
<!-------------省略------------------->
<!-------------省略------------------->
<div class="back-to-top"></div>
</div>
</body>
</html>
6.etc
6.1圖床
- 七牛(10G免費(fèi))
