创建你的个人博客

评估和规划

首先要做的,最重要的,也是最难的:确定你是否要搭建自己的个人博客网站。

写博客的目的可以是一段记录、更好的展现、更多的互动。而个人博客网站,除了前面说的之外还具备内容无要求、页面自定义、自主版权自主转载等开放特性。但是也需要搭建者具备一定的技术基础,而且还会有一点点不定期的维护工作。所以在打算搭建个人博客网站时,有必要考虑这几个问题,这些问题可以帮助你选择使用公共博客网站还是自建博客网站。

  • 用途,博客内容是否需要完全开放和互动,主动的展现和分享。
  • 内容,首页、页面、广告均可以自主安排,是否需要一些特定内容,不想为广告代言。
  • 个性,页面是否需要完全的自定义,菜单摆放,文字大小,色彩搭配,横幅图片等等。
  • 热度,由于个人博客内容更新没法和公共博客网站比,是否不在意个人博客可能是个不被搜索引擎关注的网站。
  • 技术,是否具备一定的 WEB 技术能力。这不是选个方案看文档使用这么简单,在使用过程中一定会碰到一些问题,需要技术分析判断的能力,需要解决问题的能力,没有技术基因将会很麻烦。

打算自建博客了,可能你也用过一些博客网站。大部分博客网站都有自己的内容层面、主题、人群,你写的博文也需要符合特定的要求才会受到欢迎和推荐,得到更多的展示和互动。回到以上的要考虑的 5 点问题,如果回答多数是肯定的,那么就可以搭建一个你自己的博客网站。如果是一个团队共用的博客网站,那将是更好的选择,因为不容易出现内容更新问题。动手之前,以下几点需要事先规划好,否则将影响后续的维护。

  • 链接规则,即你博客文章的链接。链接修改会影响到接入的评论系统、网站统计/访问计数、搜索引擎收录、文章链接分享等。因为你博客链接改动了其他系统并不知道,当然会产生很多死链。评论系统、统计系统可能需要进入后台改动,搜索引擎需要一定的时间重新收录新链接,链接分享更是要自己删除了。
  • 网站统计、访问计数,这些最好事先选好接入,后面再接入的话就会产生博客运行一段时间了,访问却是从 0 开始。本文作者的博客是在 2017-07-20 建的,可是却在 2018-02-14 才接入访问计数,那时就有种奇怪的体验。
  • 图片、视频、大文件存储,CDN 加速。如果网站空间足、速度快还好,如果是像很多人一样托管于 github pages 那就要考虑这方面问题。
  • 全站 HTTPS,CDN、评论系统、访问计数器、社交网络分享等等连接入的服务都要能支持 HTTPS,在服务评估选择的时候就需要考虑这个问题,只要有一处不是 HTTPS 体验就会打个折扣。

Hexo 是常用的博客方案之一,可以在 Windows 上使用(本文作者是在 Windows 10 64bit 上使用 Hexo)。本文后面的内容是 Hexo 默认主题 Landscape 的一些定制,不是全方位的定制,是一些可能不容易搜索到的。

安装

安装之前需要准备好 Node.jsGit,到官方网站下载压缩包解压,设置环境变量即可。Hexo 的安装可以参考其文档,Hexo 的文档写的很清楚,安装完成后可以将一些常用插件也安装上。

插件作用 安装
支持 RSS 订阅 npm install hexo-generator-feed --save
通过 Git 部署 npm install hexo-deployer-git --save
生成站点地图 npm install hexo-generator-sitemap --save

配置测试服务器

如果默认端口号被占用,又不想每次 hexo s 的时候都敲端口号,可以配置测试服务器端口如 9090。这样在 hexo s 后,浏览器打开 127.0.0.1:9090 即可,把这地址加入收藏夹更方便。

Hexo\_config.yml 添加以下代码

# Server
server:
port: 9090

网站图标

Hexo\themes\landscape\_config.yml 图标配置 favicon: /favicon.png 路径是相对于 Hexo/Source,也可以配置到子目录下。png 图可以是 300x300 左右,ico 则要软件生成多分辨率的。

Hexo\themes\landscape\layout\_partial\head.ejs

<link rel="icon" href="<%- theme.favicon %>">

加上 mime 说明提高浏览器兼容性,如果使用 png 图片作为图标则改为

<link rel="icon" type="image/png" href="<%- theme.favicon %>">

Markdown 引用样式

Hexo\themes\landscape\source\css\_partial\article.styl

.article-entry
blockquote
font-family: font-serif
font-size: 1.4em
margin: line-height 20px
text-align: center
footer
...

默认引用看起来会不像 Markdown,改为较为普遍的风格

.article-entry
blockquote
font-family: font-serif
//knight. blockquote style
margin: line-height 8px
padding: 0 0.8em;
border-left: 4px solid #bbb
color: #777
footer
...

“阅读全部”按钮样式

Hexo\themes\landscape\source\css\_partial\article.styl

.article-more-link a
display: inline-block
line-height: 1em
padding: 6px 15px
border-radius: 15px
background: color-background
color: color-grey

左右的圆角改为扁平化方块

.article-more-link a
display: inline-block
line-height: 1em
padding: 8px 16px
border-radius: 3px // knight. read more style
background: #eee
color: color-grey

代码块高亮样式

Hexo\themes\landscape\source\css\_partial\highlight.styl

// https://github.com/chriskempson/tomorrow-theme
highlight-background = #2d2d2d
highlight-current-line = #393939
highlight-selection = #515151
highlight-foreground = #cccccc
highlight-comment = #999999
highlight-red = #f2777a
highlight-orange = #f99157
highlight-yellow = #ffcc66
highlight-green = #99cc99
highlight-aqua = #66cccc
highlight-blue = #6699cc
highlight-purple = #cc99cc

源码第一行注释的链接进去可以找到配色方案和颜色值。下面是淡色调代码高亮配色方案,也是本博客的代码高亮配色方案。

// https://github.com/chriskempson/tomorrow-theme
// knight. [Tomorrow Night Eighties]->[Tomorrow]
highlight-background = #f6f6f8
highlight-current-line = #efefef
highlight-selection = #d6d6d6
highlight-foreground = #4d4d4c
highlight-comment = #8e908c
highlight-red = #c82829
highlight-orange = #f5871f
highlight-yellow = #eab700
highlight-green = #718c00
highlight-aqua = #3e999f
highlight-blue = #4271ae
highlight-purple = #8959a8

单行代码样式

Hexo\themes\landscape\source\css\_partial\highlight.styl

.article-entry
pre, code
font-family: font-mono
code
background: color-background
text-shadow: 0 1px #fff
padding: 0 0.3em
pre

改为像 VSCode 的风格

.article-entry
pre, code
font-family: font-mono
code
background: color-background
// text-shadow: 0 1px #fff
color: #f5871f
padding: 0 0.3em
pre

Source Code Pro 字体

Hexo\themes\landscape\source\css\_variables.styl

font-mono = "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace

该字体无法到达,使用其他等宽字体,另外添加中文字体以支持代码中出现的中文注释

font-mono = Consolas, Monaco, Menlo, "Microsoft YaHei"

Hexo\themes\landscape\layout\_partial\head.ejs,删除以下代码

<% if (config.highlight.enable){ %>
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<% } %>

JQuery

Hexo\themes\landscape\layout\_partial\after-footer.ejs

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

链接无法到达,换成其他的

<script src="https://apps.bdimg.com/libs/jquery/2.0.3/jquery.min.js"></script>

删除 FancyBox(需要一定技术基础)

如果博客内容不是图片为主的话可以不用 FancyBox。

Hexo\themes\landscape\_config.yml 删除 fancybox: true|false

删除 fancybox 的相关文件、文件夹:
Hexo\themes\landscape\scripts\fancybox.js
Hexo\themes\landscape\layout\_partial\post\gallery.ejs
Hexo\themes\landscape\source\fancybox

搜索删除 fancybox 相关代码,.article-gallery* 等样式均可删除。
hexo cleanhexo g 除错。

删除 MobileNav(需要一定技术基础)

这是用移动设备浏览时的弹出式导航菜单。

删除文件:
Hexo\themes\landscape\source\css\_partial\mobile.styl
Hexo\themes\landscape\layout\_partial\mobile-nav.ejs

搜索删除 mobile-navmq-mobile#main-nav-toggle 相关代码
hexo cleanhexo g 除错。

手机浏览和 PC 一样

最近更新 2018-09-22