你该有一个属于自己的个人博客了

个性与张扬

前言

周末用了不到一天时间搭建了属于自己的博客，欣喜之余，就想着提笔将个人博客搭建的详细过程记录下来，以便分享给众读者使用；
搭建之前，笔者看过其他博客的搭建教程，上面都提到可以在短短几分钟搭建好自己的博客。
从搭建到博客访问确实只需要几分钟的时间，但几分钟的工作并未达到我们的预期，需要优化的时间可不止几分钟。遗憾的是，那些教程并没有将博客优化过程可能遇到的坑提及出来。因此，本文有必要补充一下。

个人博客的好处

自由：我的地盘我做主，游戏的规则我来定，想想都很爽。文章的内容、格式、布局都可在自己的掌控范围内，不收其他博客平台的限制；
个性：现在提倡是创新，需要的是特色与个性，这样才能突显出自己的与众不同。要学会打造属于自己的品牌，分享自己对同一事物的不同看法。Ta,给了你展示个性的机会；

个人博客，走起

个人博客方案选择

笔者选择的是GitHubPages + Hexo+Next，一种简单高效的实现方式，当然还有其他的实现方式，如：WordPress、GitHubPages + Jekell等等。

创建Github仓库

在浏览器输入Github网址;
登录或者注册；
点击下图所示的** New repository**:

创建仓库

填写仓库名称：注意 Respository name 中一定要输入：你的用户名.github.io,然后点击”Create repository“ 按钮完成创建即可。我尝试过在这填写过：不是用户名.github.io,最终的后果是显示404页面。故，读者在这略微留意一下。具体如下图所示：

填写仓库名

本地环境的准备工作

笔者使用的是Mac系统，主要以Mac操作进行讲解；

Git安装

Git已帮大家下载好了，只需去百度云下载一份安装即可，也可去Git官网下载；

Nodejs安装

两种方式：其一去百度云下载一份直接安装；其二去Nodejs官网下载。
说明：Nodejs也可使用Nodejs版本管理器nvm安装，考虑其安装过程中存在的问题较多，操作流程也多，笔者不推荐大家使用这种方式安装。此处就不列举其安装方式。

Hexo安装

打开终端，输入Hexo的安装命令：

npm install hexo-cli -g

若此命令安装不成功时，可输入下面的命令和开机密码继续完成安装：

sudo npm install hexo-cli -g

打开终端，定位到你希望存储博客的目录下，如下所示：

锁定存储路径

执行Hexo命令，初始化本地博客仓库：

hexo init 你的用户名.github.io // 尽量和Github仓库使用同一个名称

博客效果预览

上述步骤完成后，基本的博客框架就已经搭建完了，Hexo安装完成后默认使用landscape主题；
在终端定位到xxx.github.io文件夹下，并在终端输入下面的命令就能启动服务预览功能；

hero s

操作步骤

在浏览器上输入网址：http://localhost:4000/，就能预览到landscape主题下的博客效果，具体如图：

默认博客效果

如果你觉得这个主题很合心意，就可以默认使用这个主题，若不满意，那就继续向下看吧。

Next主题安装

Next主题是iissnan所创作的一个Hexo主题，以简洁为主；
开始安装主题之前，可以打开xxx.github.io文件，将此文件夹中的themes移除掉，当然你可以在安装过程中直接替换掉；
安装：在终端定位到xxx.github.io目录下，执行下面的命令后，稍等片刻，主题就下载到对应的位置；

cd xxx.github.io
git clone https://github.com/iissnan/hexo-theme-next themes/next

主题下载后的目录

博客的站点配置

站点配置文件：打开之前的xxx.github.io文件夹，找到_config.yml即为站点配置文件，选中该文件->右击->打开方式->文本编辑（也可以选择Sublime打开），打开后就可以修改基本的博客配置了；（注意一下：在配置文件里‘#’就是注释符，相当于C语言中的‘//’）

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

# Site
title: 最晚的开始   #站点名称
subtitle: 所有的为时已晚都是开始的最好时候  #副标题
#个人描述
description: My goal is not write code.if we could ship products and make all this money without writing any code,we could.Your job is ship products EXACTLY on time.It doesn’t matter whether you are a developer,tester,program manager,product manager whatever.Everybody’s job is the same. 
author: Jack_lin  #作者
language: zh-Hans  #语言
timezone:

# URL   
#绑定域名后，要创建 sitemap.xml 时再配置该项 
## 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:

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

# 头像， 在xxx.github.io/source 下相对路径，若source文件夹下没有uploads，就新建一个名为uploads文件夹，具体见下面截图
avatar: /uploads/images/avatar.png

# Deployment
#这里是部署到Github上的设置
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git  #git提交
repo: https://github.com/123sunxiaolin/123sunxiaolin.github.io.git  #已创建的Github仓库
branch: master #提交到的分支

头像设置目录

配置好站点配置文件，就可以预览一下博客的效果了，流程与前面的相同，即在终端定位到xxx.github.io文件夹，执行hexo s命令。

博客的Next主题配置

主题配置文件：需要与之前讲过的站点配置文件进行区分，站点配置文件在xxx.github.io/_config.yml目录；主题配置文件在xxx.github.io/themes/next/_config.yml目录下；
关于主题可配置的选项略多，故采取分条讲解的形式，具体如下：

1、设置关键字

  # Set default keywords (Use a comma to separate)
  keywords: “iOS, 程序猿, 文艺小青年”     #修改

2、设置博客的开始时间

  # Specify the date when the site was setup
   #since: 2016   #设置博客的开始时间

3、菜单栏的设置

  # ------------------------------------------------        ---------------
  # Menu Settings
  # ---------------------------------------------------------------
  # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
    menu: #- 修改
    home: /   #在菜单上显示首页  
    archives: /archives   //设置显示归档
    categories: /categories   // 设置显示分类
    tags: /tags   //设置显示标签
    about: /about   //设置显示关于
    #commonweal: /404.html

4、菜单栏的图标设置：可从Font Awesome 网站查询图标对应的名称填入到对应的菜单项即可

  #设置菜单的图标，规则为：菜单（左）：图标名（右）
  menu_icons:  
  enable: true
  #KeyMapsToMenuItemKey:   NameOfTheIconFromFontAwesome
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat

5、设置博客的外观

  # Schemes
  #scheme: Muse   #默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
  #scheme: Mist  #Muse 的紧凑版本，整洁有序的单栏外观
  scheme: Pisces  #双栏 Scheme，当然也是我选择的

6、设置社交链接（设置了Github、微博）

   # Social Links
  # Key is the link label showing to end users.
  social:
  GitHub: https://github.com/123sunxiaolin
  Weibo: http://weibo.com/JacklinIOS/profile?rightmod=1&wvr=6&mod=personinfo
   #JianShu: //www.greatytc.com/users/ef991f6d241c/latest_articles
  #设置社交链接对应的图标
  social_icons:
  enable: true
  # Icon Mappings. - 修改
  KeyMapsToSocalItemKey:  NameOfTheIconFromFontAwesome
  GitHub: github
  Twitter: twitter
  Weibo: weibo
  #JianShu: heartbeat

  # Blogrolls -设置友情链接
  links_title: Links
  #links_layout: block
  #links_layout: inline
  links:
  Jack_lin简书: //www.greatytc.com/users/ef991f6d241c/latest_articles

设置后的效果图

7、设置侧栏的头像

 # Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
avatar: /images/avatar.jpg  #修改 - 侧滑栏头像，可参考站点配置文件中关于头像的设置

注意一点使用next主题时，侧栏头像只能存储在主题目录下images文件夹里

8、设置侧栏的方向（设置成左侧）

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

9、设置博客中代码高亮显示

 # 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

10、设置微信支付宝赞赏功能

# 打赏配置
# 打赏说明文本
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
# 微信收款二维码
wechatpay: /uploads/images/wechat-reward-image.png
# 支付宝收款二维码
alipay: /uploads/images/alipay-reward-image.png

11、设置微信公众号订阅

# Wechat Subscriber - 微信订阅
wechat_subscriber:
enabled: true
qcode: /uploads/images/wechat-qcode.jpg
description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！

赞赏和微信订阅效果

12、添加网页计数器-不蒜子

# Show PV/UV of the website/page with busuanzi.
# Get more information on   http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i>
site_uv_footer: 
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i>
site_pv_footer:
# custom pv span for one page only
page_pv: true
page_pv_header: <i class="fa fa-file-o"></i>
page_pv_footer:

创建分类界面

打开终端，定位到xxx.github.io目录下；
执行下面的命令，新建一个名为categories的页面；

hexo new page categories

创建完成后，在对应的目录下找到index.md文件，进行如下的修改：

---
title: categories
date: 2016-08-20 22:17:49
type: "categories" # 将页面的类型设置为 categories,主题将自动为这个页面显示所有分类
comments: false
---

设置后的效果

创建标签界面

打开终端，定位到xxx.github.io目录下；
执行下面的命令，新建一个名为tags的页面；

hexo new page tags