未完待續(xù).....

前言

作為一個有技術(shù)追求的程序員媒峡，沒有一個獨(dú)立域名的技術(shù)博客察净，還怎么在業(yè)內(nèi)混（zhuang)呢(bi)掠手？

最近剛搭建完自己的靜態(tài)技術(shù)博客抒巢，索性就寫一篇教程來作為自己的第一篇文章了。以后會不定期更新介粘，寫些技術(shù)總結(jié)和經(jīng)驗(yàn)總結(jié)殖氏，權(quán)當(dāng)自己的學(xué)習(xí)筆記了，用來記錄自己的成長之路姻采。

讀大學(xué)的時候雅采，在博客園和CSDN上發(fā)表過一些文章，始終覺得編輯的時候特別蛋疼慨亲，體驗(yàn)極差婚瓜，完全不符合程序員的風(fēng)格，一點(diǎn)都不 geek 刑棵。聽說GitHub Pages 可以搭建靜態(tài)博客巴刻，搭建好環(huán)境后， 只需要用 markdown 來編輯蛉签，然后運(yùn)行命令行自動部署就可以了胡陪，這完全就是為程序員打造的嘛，于是我就開始折騰了正蛙。

Github Pages 建立的博客可以直接使用 http://username.github.io進(jìn)行訪問了督弓，比如我的博客: http://jumpingfrog0.github.io，當(dāng)然也可以配置一級域名乒验，這個后面會講到愚隧。

Github Pages 官方的搭建靜態(tài)博客的方式是 Jekyll，但是過于繁瑣復(fù)雜锻全，而程序員永遠(yuǎn)是懶惰的狂塘，總是喜歡用更簡單的方式去完成一件事情，于是 Hexo 誕生了鳄厌。

Hexo 具有很多的優(yōu)點(diǎn)：

• 比 Jekyll 更快的生成靜態(tài)網(wǎng)頁的速度
• 支持 Markdown 格式
• 一行命令自動部署
• 強(qiáng)大的插件系統(tǒng)
• 有很多優(yōu)秀且開源的主題可供選擇

配置 Hexo

安裝并部署

安裝 Hexo 只需要一行命令荞胡，打開終端，輸入

$ npm install hexo-cli -g

部署 Hexo了嚎，打開終端泪漂，輸入

$ hexo init blog
$ cd blog
$ npm install
$ hexo server

這樣就已經(jīng)搭建好本地的 Hexo 博客了，所有的文件都放在 blog 文件夾下歪泳。

目錄結(jié)構(gòu)如下所示

.
|--- _config.yml
|--- db.json
|--- public
|--- source
|   |--- _post
|--- themes

各個文件(夾)的作用如下：

* _config.yml: 站點(diǎn)配置文件萝勤，用來配置各種設(shè)置
* db.josn: 緩存文件
* public：部署后生成的靜態(tài)網(wǎng)頁文件都放在這個目錄下
* source: 存放網(wǎng)站內(nèi)容的地方
* _post: 存放文章(md文件）的地方
* themes: 配置主題

更多詳情請查看官方介紹

打開瀏覽器，輸入localhost:4000呐伞，就可以看到Hexo自動生成的默認(rèn)主頁 Hello World

Hexo 常用命令

• hexo init [folder] 初始化網(wǎng)站
• hexo new <title> 新建文章敌卓，簡寫 hexo n <title>
• hexo generate 生成靜態(tài)文件，簡寫 hexo g
• hexo server 開啟本地服務(wù)器伶氢，簡寫 hexo s
• hexo deploy 自動部署趟径，簡寫 hexo d
• hexo clean 清空緩存文件(db.json)和生成的靜態(tài)文件(public)

可以在常用命令后面加些參數(shù)

• hexo s --debug 已debug模式啟動本地服務(wù)器
• hexo g -d 生成靜態(tài)文件后自動部署

更多命令請查看 Commands

配置 Github Pages

打開 Github 瘪吏，新建一個 repository，命名為 username.github.io 蜗巧，比如我的就是 jumpingfrog0.github.io

注意：repository 的名字中的 username 必須為你 github 賬號的用戶名掌眠，如果不匹配，那將沒法正常工作

Clone 剛才新建的 repository

$ git clone https://github.com/username/username.github.io

手動部署

• 切換到 repository 的目錄 username.github.io幕屹，把剛才部署的 Hexo 文件夾 blog 中的所有文件都復(fù)制到該目錄下

• push到遠(yuǎn)程倉庫上

  $ git add --all
  $ git commit -m "Initial commit"
  $ git push -u origin master
  

• 在瀏覽器中打開 http://username.github.io扇救，就訪問看到靜態(tài)博客首頁了

自動部署

• 在站點(diǎn)配置文件中(blog目錄下的_config.yml)加入以下代碼

deploy:
    type: git
    repository: https://github.com/username/username.github.io.git
    branch: master

• 打開終端，輸入以下命令

$ hexo clean
$ hexo g -d

運(yùn)行完命令后香嗓，查看 Github 上 username.github.io repository 的提交記錄，就可以有一個新的commit装畅。在瀏覽器中打開 http://username.github.io靠娱，查看首頁的變化。

配置主題

Hexo 可以很輕松的配置各種主題掠兄，官方Themes提供了很多個人開發(fā)者貢獻(xiàn)的開源的主題,我們可以直接拿來使用像云。

當(dāng)然，如果你想自己定制主題也可以蚂夕，用js自己擼一套迅诬，請參照文檔Customization Themes

我使用的是 NexT 主題，NexT 這套主題簡潔優(yōu)雅且易于使用婿牍，而且其作者目前依然在維護(hù)更新中侈贷，使其更優(yōu)雅。具體配置可以看 NexT 的主題配置文檔等脂，這里不再贅述俏蛮。

在 Hexo 中有兩份主要的配置文件，其名稱都是 _config.yml上遥。 其中搏屑，一份位于站點(diǎn)根目錄下，主要包含 Hexo 本身的配置粉楚；另一份位于主題目錄下辣恋，這份配置由主題作者提供，主要用于配置主題相關(guān)的選項(xiàng)模软。

為了描述方便伟骨，在以下說明中，將前者稱為 站點(diǎn)配置文件撵摆， 后者稱為 主題配置文件底靠。

下面帖下我自己的配置

站點(diǎn)配置文件

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

# Site
title: jumpingfrog0
subtitle:
description: Know a lot about a little, know a little about a lot
author: jumpingfrog0
language: zh-Hans
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://jumpingfrog0.com
root: /
# permalink: :year/:month/:day/:title/
permalink: :year/: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: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# duoshuo
# duoshuo_shortname: jumpingfrog0

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

主題配置文件

# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------

# Place your favicon.ico to /source directory.
favicon: /favicon.ico

# Set default keywords (Use a comma to separate)
keywords: "jumpingfrog0, Swift, iOS"

# 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:

# Specify the date when the site was setup
since: 2016

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running hexo in a subdirectory (e.g. domain.tld/blog)
# Remove leading slashes ( "/archives" -> "archives" )
menu:
  home: /
  #categories: /categories
  #about: /about
  archives: /archives
  tags: /tags
  about: /about
  #commonweal: /404.html

# Enable/Disable menu icons.
# Icon Mapping:
#   Map a menu item to a specific FontAwesome icon name.
#   Key is the name of menu item and value is the name of FontAwsome icon.
#   When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
# scheme: Muse
#scheme: Mist
scheme: Pisces

# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------

# Social links
social:
  GitHub: https://github.com/jumpingfrog0
  # twitter: https://twitter.com/your-user-name
  微博: http://weibo.com/3290250165/profile?topnav=1&wvr=6&is_all=1
  # douban: https://www.douban.com/people/137739388/
  知乎: https://www.zhihu.com/people/huang-dong-hong
  #Others:

# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  Weibo: weibo

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
# default : /images/default_avatar.jpg
avatar: /images/minion.jpeg

# Links title, Chinese available
links_title: Links
# links
links:
  Bing: http://bing.com
  Objccn.io: http://objccn.io/

# TOC in the Sidebar
toc:
  enable: true

  # Automatically add list number to toc.
  number: true

# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
#creative_commons: by-nc-sa
#creative_commons:

sidebar:
  # Sidebar Position, available value: left | right
  position: left
  #position: right

  # Sidebar Display, available value:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  Totally remove sidebar including sidebar toggle icon.
  display: post
  #display: always
  #display: hide
  #display: remove

# ---------------------------------------------------------------
# Misc Theme Settings
# ---------------------------------------------------------------

# Custom Logo.
# !!Only available for Default Scheme currently.
# Options:
#   enabled: [true/false] - Replace with specific image
#   image: url-of-image   - Images's url
custom_logo:
  enabled: false
  image:

# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true

# Automatically Excerpt
auto_excerpt:
  enable: true
  length: 150

# Use Lato font
use_font_lato: true

# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------

# MathJax Support
mathjax:

# Swiftype Search API Key
swiftype_key: _hsnBCSxyAH__Kvfd1uL

# Baidu Analytics ID
#baidu_analytics:

# Duoshuo ShortName
duoshuo_shortname: jumpingfrog0
duoshuo_hotartical: true

# Disqus
#disqus_shortname:

# Baidu Share
# Available value:
#    button | slide
#baidushare:
##  type: button

# Share
jiathis: true
#add_this_id:

# Share
duoshuo_share: true

# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
#google_site_verification:

# Google Analytics
#google_analytics:

# CNZZ count
#cnzz_siteid:

# 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: false
  user_id: 0
  #admin_nickname: ROOT

# Facebook SDK Support.
# https://github.com/iissnan/hexo-theme-next/pull/410
facebook_sdk:
  enable: false
  app_id:       #<app_id>
  fb_admin:     #<user_id>
  like_button:  #true
  webmaster:    #true

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: false
  app_id: #<app_id>
  app_key: #<app_key>

# Tencent analytics ID
# tencent_analytics:

#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------

# Motion
use_motion: true

# Fancybox
fancybox: true

# Static files
vendors: vendors
css: css
js: js
images: images

# Theme version
version: 0.5.0

DNS 設(shè)置

還未配置，等購買域名后配置了再更...