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

获取Github Pages

1. 去Github官网注册账号

2. 新建一个repo，注意名称一定是your_username.github.io这样的格式。

   比如你的用户名为zhangsan，Repository name里面就填上zhangsan.github.io

3. 进入刚新建的仓库，点击Setting，一直拖到最下面，选择Automatic Page Generator，随便选个主题然后发布即可。

详细步骤见这个博客

Hexo搭建静态博客

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

• Node.js
• Github for windows

配置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去看看吧。一般来说如果出现莫名的问题，按照以下步骤即可解决。

1. 删除.deploy_git文件夹
2. hexo clean
3. hexo g
4. 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> 

效果如图

继续美化博客

修改文章宽度

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

如何修改文章宽度？

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

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

1. \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关键字的使用方法及原理