Github Pages + Hexo搭建个人博客

之前在简书上写东西，觉得自己还是太浮躁。本来打算用Flask自己写一个，以为是微框架就比较简单，naive。HTML、CSS、JS等都要学啊，我几乎没有这方面的基础，写到Web表单那儿果断弃了，转向简单的Hexo + Github Pages。不过要想搭建博客的同时巩固Python，Flask确实是一个不错的选择。

获取Github Pages

去Github官网注册账号
新建一个repo，注意名称一定是your_username.github.io这样的格式。

比如你的用户名为zhangsan，Repository name里面就填上zhangsan.github.io
进入刚新建的仓库，点击Setting，一直拖到最下面，选择Automatic Page Generator，随便选个主题然后发布即可。

详细步骤见这个博客

Hexo搭建静态博客

hexo是一款基于Node.js的静态博客框架，Github官方推荐的是Jekyll。对比了下，大多认为hexo比较简单，于是我选择了它。我们需要安装如下软件

配置SSH

使用Github for windows首次登录时就自动在本地生成了密钥，并远程添加到了Github。自动配置好SSH还是很省事的。

安装hexo

详细步骤见iHTCboy的简书以及岁月如歌的博客。我是跟着他们写的一步步来的，别人说的很详细的我也没必要再重复。我粗略写下来只是为了记录个人学习过程。

打开Git Shell，cd到你想搭建博客的路径，比如D:\My Documents\GitHub\blog。依次输入

npm install hexo-cli -g  #安装hexo
hexo init                # 初始化，安装所需包
npm install              # 其实此句不是必须，新版本的Hexo在初始化时就安装好了依赖包)
hexo g                   # 生成
hexo s                   # 运行

然后在浏览器输入localhost:4000就能在本地预览我们新搭建的博客了。hexo的常用指令不多，主要如下

hexo n          # 新建文章，在\source\_posts文件夹里
hexo new page   # 新建页面，比如想在导航栏新增一个“关于我”的页面
hexo clean      # 清除本地的数据库和生成的public文件夹
hexo g          # 生成博客文件
hexo s          # 运行在本地浏览器，可当预览使用
hexo d          # 部署博客到Github等

注意所有命令需要在cd后的新路径中进行

新建文章

键入hexo n "name"即可在\source\_posts文件夹里生成name.md的Markdown文件，文件结构如下

---
title: HelloWorld！ # 文章页面上的显示名称，可以任意修改，不会出现在URL中
date: 2015-11-09 15:56:26 # 文章生成时间，一般不改
categories:   # 文章分类目录，参数可省略
    - 随笔 # 此为一级目录
    - 瞬间 # 此为二级目录
    - 关于 # 此为三级目录
tags:   # 文章标签，参数可省略
    - hexo
    - blog # 个数不限，单个可直接跟在tags后面
---
这里开始是正文

如果想生成的文件默认带categories，那么打开根目录下\scaffolds\post.md新增一行categories :就修改好了模板文件。如果想在主页中以摘要形式显示你的文章，要么正文中加入``即可屏蔽该语句下面的内容。

部署到Github Pages

在根目录下_config.yml里面任意位置新增以下语句

deploy:
  type: git
  # 填上你自己的仓库名，注意后面有`.git`
  repository: git@github.com:your_username/your_username.github.io.git 
  branch: master

最好不要采用http形式的如https://github.com/your_username/your_username.github.io.git而采用SSH换版本的git@github.com:your_username/your_username.github.io.git，如下图点击Use SSH后再复制。

所有冒号后面必须键入一个空格

好了现在可以部署到Github了。输入npm install hexo-deployer-git --save，然后再执行hexo d来部署。否则会出现Deployer not found:git的错误。耐心等待，出现Deployer done: git表示你部署成功了！输入网址your_username.github.io去看看吧。一般来说如果出现莫名的问题，按照以下步骤即可解决。

删除.deploy_git文件夹
hexo clean
hexo g
hexo d

个性化你的博客

全局配置

在根目录_config.yml里进行全局配置。

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

# Site
title: 海之声 #主页标题
subtitle: 参差多态乃是幸福本源 #副标题
description: 参差多态乃是幸福本源 # 网站描述，可以加一句自己喜欢的座右铭
author: haiyusun #作者，左下角显示
avatar: /images/avatar.jpg #设置头像，放在\themes\next\source\images里
language: zh-Hans # 选择中文简体
timezone:
since: 2016 #建站日期，左下角显示

# 多说 ShortName
duoshuo_shortname: your_username # 多说评论，后面填写用户名
# 百度分析
baidu_analytics: your_id # 填写自己获得的id

# Social links
social:
  Github: https://github.com/haiyusun
  Email: mailto:haiyu19931121@163.com

# title, chinese available
links_title: 友情链接
# links
links:
  我的简书: http://www.jianshu.com/users/4943cb2c6ea4

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://haiyusun.github.io/ #填自己的github pages网址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# 本地搜索
search:
  path: search.xml
  field: post

# 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: true
  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/
# 百度网站地图
plugins:
baidusitemap: # 需要安装插件 npm install hexo-generator-baidu-sitemap@0.1.1 --save
  path: baidusitemap.xml

# 主题切换
theme: next
# RSS订阅
feed:
  type: atom
  path: atom.xml
  limit: 0

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
    type: git
    repo: git@github.com:your-username/haiyusun.github.io.git
    branch: master

# ---------------下面选项需要对应插件的支持---------------
# npm install hexo-generator-index --save
# npm install hexo-generator-archive --save
# npm install hexo-generator-category --save
# npm install hexo-generator-tag --save

index_generator:
  per_page: 10 ##首页默认10篇文章标题 如果值为0不分页

archive_generator:
  per_page: 20 ##归档页面默认20篇文章标题
  yearly: true  ##生成年视图
  monthly: true ##生成月视图

tag_generator:
  per_page: 10 ##标签分类页面默认10篇文章

category_generator:
  per_page: 10 ###分类页面默认10篇文章

主题配置

自带的landscape主题不太好看，我选了NexT。将其克隆到本地，在根目录下theme文件夹下新建next文件夹，把刚才下载的全放进去，然后在根目录_config.yml里找到theme: landscape将其替换成next即启用该主题。官方给出的NexT主题使用教程十分详细，建议先看看，配合着岁月如歌的博客应该能做出效果不错的个人博客了。至此我们的博客就带有RSS订阅、百度统计、来访/阅读次数统计、网站地图、评论系统、分享服务、本地搜索等功能了。

以下针对我自己的问题作个记录。

文章分类

新增导航

默认导航栏只有首页、归档、标签、分类四项。如果想增加其他如C++、随笔等。需要打开\themes\next\_config.yml找到如下

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories
  tags: /tags
  archives: /archives
  # 这里是新增的，程序猿是一级目录，C是二级目录，同理随笔是一级目录
  c++: /categories/程序猿/C/
  python: /categories/程序猿/Python/
  essay: /categories/随笔/
  # 注意这里没有/categories
  about: /about

假如我想新建C++、Python、随笔三个导航按钮，并且打开他们的效果如下图。

需要注意的是前面要加上/categories，格式是这样python: /categories/这里是文章的一级目录/这里是文章的二级目录/。结尾要加上/分隔符。这几个页面是不需要通过hexo new page来生成的。关于导航栏及侧栏所用的图标来自fontawesome。在\themes\next\_config.yml里配置。

# 导航栏的图标，输入网站内图标的对应单词
menu_icons:
  enable: true
  #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  c++: keyboard-o
  python: keyboard-o
  essay: pencil
  commonweal: heartbeat
  # 社交网络图标
  social_icons:
  enable: true
  # Icon Mappings.
  # KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
  GitHub: github
  Email: envelope

写文章的时候只要分类目录对应就可以被正确归类到导航栏里。如下

---
title: Python爬虫初学（三）—— 模拟登录知乎
date: 2016-09-18 17:10:59
# 对应于/categories/程序猿/Python/
categories:
    - 程序猿
    - Python
tags:
    - Python
    - 爬虫
---

新增关于我页面

这个需要hexo new page "about"生成一个新页面，menu里面新增about: /about。在新增的about文件夹可以看到index.md，对其直接编辑就可，注意不要对此文件加tags和 categories，否则会出错。

公益404页面

HTTP 404或Not Found错误信息是HTTP的其中一种“标准回应信息”（HTTP状态码），此信息代表客户端在浏览网页时，服务器无法正常提供信息，或是服务器无法回应且不知原因。

按照NexT主题使用教程添加404页面对我来说好像不可用。在知乎的这个回答中复制了某匿名用户的的代码，拷贝到\themes\next\source\404.html可行。代码如下，其中重定向链接改成你自己的主页，还可以自定义背景图片。

<html>
<head>
    <meta charset="utf-8">
    <title>404 Not Found</title>
    <style>
        *{margin:0;padding:0;outline:none;font-family:\5FAE\8F6F\96C5\9ED1,ו;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;user-select:none;cursor:default;font-weight:lighter;}
        .center{margin:0 auto;}
        .whole{width:100%;height:100%;line-height:100%;position:fixed;bottom:0;left:0;z-index:-1000;overflow:hidden;}
        .whole img{width:100%;height:100%;}
        .mask{width:100%;height:100%;position:absolute;top:0;left:0;background:#000;opacity:0.6;filter:alpha(opacity=60);}
        .b{width:100%;text-align:center;height:400px;position:absolute;top:50%;margin-top:-230px}.a{width:150px;height:50px;margin-top:30px}.a a{display:block;float:left;width:150px;height:50px;background:#fff;text-align:center;line-height:50px;font-size:18px;border-radius:25px;color:#333}.a a:hover{color:#000;box-shadow:#fff 0 0 20px}
        p{color:#fff;margin-top:40px;font-size:24px;}
        #num{margin:0 5px;font-weight:bold;}
        .plan{color: black;background: white;font-size: 30px; margin-top: 20px;}
        .plan:hover{color: white;background: black;font-size: 30px;}

            #gg {
               position: absolute;
    width: 654px;
    height: 470px;
    left: 50%;
    top: 50%;
    margin-left: -377px;
    margin-top: -235px;
        }
    </style>
</head>
<body onload="redirect();">
      <div id="gg">
        <!--以下网址为益播生成的404页面-->
       <iframe   class="gg" scrolling='no' frameborder='0' src='https://yibo.iyiyun.com/Home/Distribute/ad404/1182245' width='654' height='470' style='display:block;'>
    </iframe>
    </div>
<div class="whole">
  <!--这里是自定义图片的地址-->
    ![](http://upload-images.jianshu.io/upload_images/2726327-4ae4ff22fb6c19da.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</div>
</body>
</html>

效果如图

继续美化博客

修改文章宽度

如果嫌博客页面两边大量留白，文章宽度不够，可以修改。见知乎-高爷的回答。

如何修改文章宽度？

\themes\next\source\css_common\components\post\post-expand.styl

@media (max-width: 767px)
改为：
@media (max-width: 1280px)

\themes\next\source\css\ _variables\base.styl中：

$main-desktop = 960px
$content-desktop = 700px
改成：
$main-desktop = 1280px
$content-desktop = 960px

我个人觉得这个又太宽了。于是改成@media (max-width: 1080px)、$main-desktop = 1080px、
$content-desktop = 810px，可凭喜好自己修改。我设置的文章宽度如下

配色与字体

继续在\themes\next\source\css\ _variables\base.styl折腾。

字号与行高

字号默认14px，虽然是主流，我个人觉得还是太小了点，看多了眼睛难受，设置成16px好多了。
找到$font-size-base = 14px，修改即可。该主题默认行高2.0，移动设备访问可见行高过高，找到$line-height-base = 2。修改成1.8个人觉得最为合适。至于代码块的字体，默认的13px确实有点小了。不过最好不要修改，否则会出现糟糕的滚动条。

配色

主要是修改网页背景色，修改超链接颜色。自定义颜色见颜色表。

//
// Variables
// =================================================
// Colors
// colors for use across theme.
// --------------------------------------------------
$whitesmoke   = #f5f5f5
$gainsboro    = #eee
$mycolor     = #EEE5DE
$gray-lighter = #ddd
$grey-light   = #ccc
$grey         = #bbb
$grey-dark    = #999
$grey-dim     = #666
$black-light  = #555
$black-dim    = #333
$black-deep   = #222
$red          = #ff2a2a
$blue-bright  = #87daff
$blue         = #0684bd
// 这是我自定义的颜色
$myblue    = #4682B4   
$blue-deep    = #262a30
$orange       = #fc6423
$mylink      = #36648B

// Scaffolding
// Settings for some of the most global styles.
// --------------------------------------------------
// Global text color on <body>
$text-color                   = $black-deep
// 修改超链接颜色
// Global link color.
$link-color                   = $myblue
$link-hover-color             = $mylink
$link-decoration-color        = $gray-lighter 
$link-decoration-hover-color  = $mylink

// Global border color.
$border-color                 = $black-light

// Background color for <body>
// 背景色，默认white，我认为太刺眼就换成了烟灰色
$body-bg-color                = whitesmoke
// 鼠标选择区域
// Selection
$selection-bg                 = $blue-deep
$selection-color              = white

我就折腾了这么多，至此博客搭建完成。

微信公众号【Java技术江湖】一位阿里 Java 工程师的技术小站。（关注公众号后回复”Java“即可领取 Java基础、进阶、项目和架构师等免费学习资料，更有数据库、分布式、微服务等热门技术学习视频，内容丰富，兼顾原理和实践，另外也将赠送作者原创的Java学习指南、Java程序员面试指南等干货资源。

本文主要介绍了final关键字的使用方法及原理

Github Pages + Hexo搭建个人博客

Github Pages + Hexo搭建个人博客

获取Github Pages

Hexo搭建静态博客

配置SSH

安装hexo

新建文章

部署到Github Pages

个性化你的博客

全局配置

主题配置

文章分类

新增导航

新增关于我页面

公益404页面

继续美化博客

修改文章宽度

配色与字体

字号与行高

配色

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Github Pages + Hexo搭建个人博客

Github Pages + Hexo搭建个人博客

获取Github Pages

Hexo搭建静态博客

配置SSH

安装hexo

新建文章

部署到Github Pages

个性化你的博客

全局配置

主题配置

文章分类

新增导航

新增关于我页面

公益404页面

继续美化博客

修改文章宽度

配色与字体

字号与行高

配色

热门文章

最新文章

相关课程

相关电子书

相关实验场景