您的位置：首页 > 其它

快速低成本的搭建一个马马虎虎的博客

2017-11-13 00:00 197 查看
本人不是很喜欢写博客，也不是很喜欢鼓捣博客，原因有三：

懒：本人超爱睡觉

抠：不想买主机，买域名

Low：没水平没干货

但是新博客还是开张了，说来也是极其惭愧，这么多年居然一点存货都没有。不能免俗，今天就低调开坛讲一讲怎么样快速低成本的搭建一个马马虎虎的（像https://zoumiaojiang.com这样）博客。这是篇基础的教程类的文章，可以先看看大纲，反正文章在这里，觉得有兴趣就可以看看。

我们最近的主要工作就是在倡导国内开发者认识、熟悉PWA，并且将自己的站点改造成PWA，或者引导产品设计师将产品逐步升级为PWA。就目前国内PWA的严峻形势来看，自由度较高，复杂度较低，并且内容更新较少利于缓存的博客是一个非常好的PWA应用场景。没错，今天的内容肯定会讲到PWA的。我也不是心血来潮想起搞一个博客的，一来确实是想记录分享些东西，二来是想看看，PWA到底能把一个博客站点的体验做成什么样的程度。

静态化站点

静态化站点大家肯定都有所了解，就是站点的内容都是由服务端直接输出HTML的那种站点，没有任何的异步请求数据，可以理解为Web1.0时代的那种充满了文字和超链接的页面组合而成的站点。

博客毕竟定位是写文章的，主要的是产出内容，最早期网页的产生也是因为某些科学家们早期有管理文档的需求。所以回想一下，我们真没必要将博客搞一套很复杂的架构，比如PHP+MySQL+…？想到这些瞬间又不想搞博客了。比较直观的感受是，今天的自媒体如此疯狂，主要就是因为写作的人只用关心写作而已。那么写博客也是一样，我们仅仅只是想写点东西而已！

所以，博客采用静态化站点的方式搭建就顺理成章了。一篇文章一个html，为这个html搞点样式，用js写点屌炸天的动画就可以丢给别人看了，一个博客就是一堆html。然后用各种超链接联系管理起来。看起来还是蛮简单的。

你也许会说：「可是劳资写html写样式什么的好费劲啊！」，没事，有利器帮助咱们搞这个事情。

Hexo

自豪的说明一下：本博客是采用Hexo搭建的博客。

Hexo是一个基于Node.js的搭建静态页面博客的工具。我斗胆通俗的给Hexo下个定义：「快速自由的开发一个套博客系统，然后让博主专心写博客就好了的一个工具」。下面我简单的介绍一下Hexo,具体的内容可以到Hexo的官网查找。

安装Hexo

首先你得安装了Node.js,NPM,等工具，这里就不细讲了。

在命令行中安装：

1
npminstall-ghexo
这个时候你就拥有了Hexo的技能了。可以在命令行中输入hexo-h验证一下是否安装成功。

Hexo用法

简单的讲讲怎么使用Hexo，具体内容和教程，可以查看Hexo官网。

初始化一个博客

1
hexoinitblog_name
执行以上命令，就可以在当前目录下看到一个blog_name命名的文件夹了。
文件夹目录就是下面这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
├──scaffolds
├──source
│└──_posts
└──themes
└──landscape
├──layout
│├──_partial
││└──post
│└──_widget
├──scripts
└──source
├──css
│├──_partial
│├──_util
│├──fonts
│└──images
├──fancybox
│└──helpers
└──js
其实就刚才那条简单的init命令，你的博客系统已经建成了，也就是说，你已经拥有了一个纯静态化的博客了。

预览博客

博客系统已经建好了，可以快速的预览一下：

1
2
3
4
cdblog_name
npminstall
#首次初始化，需要npminstall安装hexo的依赖
hexoserver
服务启动成功之后，访问http://localhost:4000就能预览到博客的首页，里面有个HelloWorld的文章，这个文章就放在/source/_posts下面的，可以发现是一个markdown的文件，也就是说Hexo是通过markdown写文章的，这样就不用写复杂的html。

开开心心的写篇文章吧

博客搭建好了，现在可以写篇文章了

1
hexonew'you-post-title'
启动HexoServer的时候，会有一个hot-reload机制的，也就是说，当写文章，新增文章的时候，都不用重新启动Hexo的预览服务了。

这时候在/source/_posts文件夹下就会有一个your-post-title.md的文件，这样，就能直接编辑这个markdown文件进行写博客，神马？不会markdown的写法？我友善的丢一个markdown教程给你吧。

维护一个Hexo博客系统只需要关注四部分:source，themes，plugins还有_config.yml。source主要就是文章，当然还可以放一些其他的直接要部署的东西。接下来讲讲themes和plugins。

Hexo主题

注意到/themes/landspace文件夹没有？landspace就是默认的Hexo的主题，主题不是简单的样式，是一系列的模版加样式的组合，从而实现将主题从博客书写中抽离出来。如果你嫌弃landspace丑爆了，可以选一个主题,放到/themes文件夹，有精力的可以二次开发改改layout、样式，交互逻辑等。等到挑选好了主题后，将主题文件夹放到/themes下，配置_config.yml内的theme:landscape改成你选择主题文件夹名就可以了。这样，你就拥有新主题了，/themes文件夹和其他文件夹是完全独立的，不会因为改变而影响博客的内容的。

你也许注意到了，Hexo采用的是ejs前端模版来组织渲染的，如果你想二次开发某个theme，就需要对ejs有一定的了解，这路就不展开介绍了，不然内容太多了。

由于本人非常没有设计天赋，本博客的主题是基于Hux的博客稍微修改了一些。感谢Hux。

Hexo插件

Hexo可以理解为一个框架，会做一些基本的编译工作，就是把markdown文件编译成html文件，然后会生成一个用来部署的public文件夹，执行hexogenerate命令就是完成这编译一步的。在这个编译的过程中，我们可能需要有一些特定的需求，比如生成tags页面啦，生成categories页面等等，这些并不是Hexo主框架本身干的事情，这个时候，需要介绍一下Hexo的plugin机制了。

看一下Hexoinit后的博客项目中的package.json文件，dependencies里面的hexo-前缀的package都是Hexo的插件，每一个插件都有自己特殊的功能，详见HexoPlugin了解每个插件的用法。当然Hexo作为一个开源的项目，也允许开发者自己开发一些自己的plugin提供给其他人使用。对于怎么开发Hexo插件，这这里就不详细讲了，内容还是比较多的，后面争取再单独写篇文章详细介绍。

部署

Hexo写文章、换主题应该都交代清楚了，这时候写完文章之后，是要准备部署给别人看了。我们首先来罗列一下，部署一个站点需要哪些东西呢？

一个主机【要钱】

一个域名【要钱】

要部署的纯静态化页面内容【免费】

「可是劳资穷，一分钱都不想花怎么办」

对于穷这件事情，我本人是深有体会的，我也穷，所以在这个时候就想方设法的薅羊毛了。好在github提供了一个服务叫做GitPage可以帮我们解决主机和域名的事情。

GitPage

目前很多很多的文档类的站点都是基于GitPage做的，节约成本，并且可以用github做代码部署，非常方便。
玩转GitPage需要有这么几个前提：

学会使用git,学会github

注册一个github账号，注册一个用户名（例如：zoumiaojiang）

新建一个仓库叫zoumiaojiang.github.io

然后跟着GitPage的教程push一些html页面和静态资源到zoumiaojiang.github.io仓库中，就可以访问https://zoumiaojiang.github.io/some.html访问页面了。

这时候，回想一下，Hexo编译之后的内容就是一堆html和一堆静态资源，这些东西正好可以放在GitPage中让别人访问。所以GitPage和Hexo真的挺合拍。

本博客就是部署在https://github.com/zoumiaojiang/zoumiaojiang.github.io上。

Hexo部署

讲了这么多，开始干正事吧，可以将Hexo构建的内容发布到GitPage上了，然后一个简简单单的博客就搭建完成了。Hexo有个强大的之处，可以通过hexodeploy命令直接发布到GitPage上，通常部署需要做下面几件事情。

修改_config.yml

首先把_config.yml的一些基本信息都配置一下，这些在Hexo的官网都有介绍的。就不详细的介绍了，我们在这里重点介绍一下和部署相关的deploy配置。

本博客关于deploy的配置如下（供大家参考）：

1
2
3
4
5
#deploy
deploy:
type:git
repository:https://github.com/zoumiaojiang/zoumiaojiang.github.io.gitbranch:master

Hexo命令操作部署

配置好了_config.yml的所有配置之后（插件的配置也是需要在_config.yml上配置的），就可以执行hexo命令进行博客的最后部署了。

1
2
3
4
5
6
#部署之前敲下面几行命令
hexoclean
hexoserver
hexogenerate
hexodeploy
#打完收工
注意：Hexo在deploy之前必须进行编译，也就是执行hexogenerate命令。

操作完了以上所有操作后，如果不出意外的话，就可以通过访问https://zoumiaojiang.github.io访问到博客的首页的，应该和hexoserver命令预览的时候一样的。这时候，一个简简单单的博客就上线了，别人可以通过URL访问到你的博客。此时只是个穷人版的博客而已，算不上马马虎虎。

指定域名

觉得https://zoumiaojiang.github.io域名太low？一看就是薅羊毛的，感觉不是很好？凭良心讲，我也是这么觉得的，所以这时候我还是想找一个域名掩盖一下我薅GitPage羊毛的事实，所以我决定买一个域名（土豪可以不用做这种心理斗争，甚至可以直接把Hexo生成的public文件夹直接部署到土豪专用主机）。

我买了一个zoumiaojiang.com域名，那好，我们现在的需求是，通过访问https://zoumiaojiang.com也能访问到博客首页。GitPage提供了一种可以绑定自定义域名的机制（GitPage这种好人已经不多了）。在zoumiaojiang.github.io仓库的根目录下新建一个CNAME的文件，里面的内容为：

1
zoumiaojiang.com
由于GitPage的仓库的内容都是由Hexo部署的，所以筒仓将CNAME放置在Hexo工程的/source目录下。

如果在/source目录下添加了CNAME文件，当重新部署之后，稍等一会之后，访问https://zoumiaojiang.github.io的时候直接就会跳转到http://zoumiaojiang.com。可是，这时候由于zoumiaojiang.com域名DNS解析没有配A记录，所以是不会有响应的。

这时候，pingzoumiaojiang.github.ioping一下，拿到IP,在域名运营商配置后台把域名DNS解析新增一个A记录指向这个IP就行。等一会，就能访问http://zoumiaojiang.com了。

HTTPS&HTTP/2

现在是2017年了，网站不是HTTPS和HTTP/2的感觉脱离时代了。HTTPS已经不是因为安全方面的问题来考虑的了，而是后面所讲到的PWA里面很多最新的HTML5API都是要求在HTTPS环境下才能正常工作的，所以要想让我们的博客更加的完美，必须要提供HTTPS环境。

可是，我并没有主机啊，没有服务器，怎么配证书？有主机的土豪的HTTPS证书可以通过Let’sEncrypt获取免费的，这个地方不深入讲了，可以参考HTTPS环境部署。

我们今天介绍另一个免费的东西，不用服务器配置证书，通过DNS代理的形式，直接可以做到HTTPS&HTTP/2接入，这个东西叫cloudflare

简单的介绍一下步骤：

上cloudflare注册一个账号

添加你的域名

选择FreePlan

根据提示进行一系列的配置（就是些选项）

最后会生成两个DNS的服务器地址

进入你的域名运营商的配置后台，将默认的DNS服务配置成cloudflare生成的两个DNS服务地址



由于DNS服务全球更新速度较慢，可能得等个一天两天的服务才能稳定访问。总之，这时候，你的站点已经是HTTPS&HTTP/2的站点了。

cloudflare的配置有很多，可以在后台进行配置，SSL需要选择FULL,并且设置HTTPREWRITE让站点能自动从HTTP重定向到HTTPS。还有很多有用的配置，大家可以自己把玩。

构建AMP

AMP是Google推出的一种网页加速的标准，通过这种标准，可以使你的站点在Google搜索结果页（这里是一个忧伤的故事，但是这并不影响我们折腾博客的激情）之后的跳转变得速度超快，具体可以详情见AMP的官网，Google还会对AMP的站点有一定的调权，也就是说，如果你的博客提供了AMP的页面，将会被Google更容易抓取和优先展现，并且能够在Google的搜索结果页秒开。

并且由于AMP页面的无block的处理，让用户在单独访问你的AMP页面的时候也有秒开的体验。还是很懵逼？什么是AMP？其实就是一个HTML页面，知识遵守AMP规范的页面，就想你现在在看的这篇博文，就有AMP版本。

那么如何让我们的博客能支持AMP呢？Hexo社区有一个叫做hexo-generator-amp的插件可以干这个事情。

引入hexo-generator-amp插件

可以使用Hexo的hexo-generator-amp插件来帮助我们构建出AMP的页面

1
2
#在hexo博客项目的根目录执行下面的命令
npminstall--savehexo-generator-amp
此时，博客已经具备生成AMP页面的基础了，由于AMP是一套独立的页面，hexo-generator-amp插件只会对文章页面生成AMP页面，要想验证，只需要在原本文章的URL的基础上在后面加上/amp即可。

配置_config.yml

hexo-generator-amp插件是需要从_config.yml中读取配置才行，配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
#ampconfig
generator_amp:
templateDir:amp-template
assetDistDir:amp-dist
logo:
path:sample/sample-logo.png
width:600
height:60
substituteTitleImage:
path:sample/sample-substituteTitleImage.png
width:1024
height:800
warningLog:false#Todisplaywarning,pleasesettrue.
其中，amp-template是指明渲染AMP页面时候所使用的渲染模版，这种配置表明AMP是有一套自己的theme,如果想改变默认的AMP主题或者其他配置，可以对amp-template里面的内容进行二次开发。

将AMP页面提交Google收录

目前AMP只能被Google搜索引擎所解析执行，所以在我们每写完一篇博客的时候，可以将生成的AMPURL提交给Google收录（虽然这是一个忧伤的故事，但是能被外国友人轻快速搜索到并且阅读体验好，也是蛮不错的一个自我安慰）。

颇为无奈的抛出一个你可能需要梯子才能够得着的Google的收录入口。

添加PWA特性

PWA是一种渐进式的WebApp,我们的博客其实就是一个WebApp,渐进式的，就是慢慢来，一步一步的用一些HTML5的最新API的实现将我们的站点的用户体验做到极致。

为什么要PWA

博客站点是最适合改造成PWA的站点了，博客具有这么几个特点：

内容更新不频繁，静态资源可能很久很久很久都不会更新（特别适合做离线缓存）

博客是静态化页面（特别适合做整站的离线处理）

博客一更新，最好能通知粉丝啦（这个理由真是一点都不违和）

博客是个人的，想怎么搞怎么搞（可以尝试更多的PWA特性)

。。。

@TODO:这里需要放一个视频，说明一下PWA到底有多强大。

怎么为博客加PWA特性

目前我们可以轻松做到为博客加入两点PWA特性

添加到主屏：Manifest

离线缓存：ServiceWorker

manifest.json

为了让博客能够添加到桌面，可以在Hexo的博客项目下的/source目录下增加manifest.json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"name":"ZouMiaojiang",
"short_name":"Peace",
"icons":[
{
"src":"/img/icons/icon-192x192.png",
"sizes":"192x192",
"type":"image/png"
},
{
"src":"/img/icons/icon-512x512.png",
"sizes":"512x512",
"type":"image/png"
}
],
"start_url":"/",
"background_color":"#ffffff",
"display":"standalone",
"theme_color":"#2874f0"
}
这样，你的博客就可以在很多安卓机上被添加到桌面了（这个功能目前是需要在用户在系统设置里打开开关的）。iOSsafari目前对Manifest的标准支持的比较糟糕。

想iOSSafari也能体验更好的添加到桌面

由于iOS上没有对manifest标准支持的很好，并且只有safari浏览器有添加到主屏（快捷图标）的入口，那我们想iOS的添加到桌面的体验更好的话，需要改动/themes/yourTheme文件夹下的内容了，为了让每个博客页面在iOS的Safari浏览器下都能被添加到桌面，需要找到themes/yourTheme/layout/_partial/head.ejs，然后在<head>的里面找个地方塞入如下html片段：

1
2
3
4
5
6
<!--AddtohomescreenforSafarioniOS-->
<metaname="apple-mobile-web-app-capable"content="yes">
<metaname="apple-mobile-web-app-status-bar-style"content="black">
<metaname="apple-mobile-web-app-title"content="Peace">
<linkrel="apple-touch-icon"href="/img/icons/icon-152x152.png">
<linkrel="shortcuticon"href="<%=config.root%>img/zoumiaojiang.ico">
当然，图片路径名称换成自己的就好了。

ServiceWorker

上一篇文章如何优雅的为PWA注册ServiceWoker提到了ServiceWorker的坑，在Webpack构建环境下，有sw-register-webpack-plugin来帮助解决ServiceWorker的注册问题。那么在Hexo的开发环境中，我们也可以借助一个叫做hexo-service-worker插件来解决博客的ServiceWorker的注册问题。

hexo-servcie-worker

在弄博客的时候，找到了一个hexo-offline的hexo插件，特别好用，ServiceWorker能够正常注册，但是这个插件只是考虑到了基本的ServiceWorker的文件生成和注册，没有考虑到更新的实时性、多个页面注册ServiceWorker等问题，所以我就自己写了个hexo-service-worker的插件。

其中有部分sw-precache相关的内容是参考hexo-offline插件的，表示感谢🙏。

使用这个插件很简单，首先是安装插件：

1
npminstall--savehexo-service-worker
然后修改_config.yml让插件生效，通常我们的配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#serviceworker
service_worker:
maximumFileSizeToCacheInBytes:5242880
staticFileGlobs:
-public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
stripPrefix:public
verbose:true
runtimeCaching:
-urlPattern:/*
handler:cacheFirst
options:
origin:cdn.a.org
-urlPattern:/*
handler:cacheFirst
options:
origin:cdn.b.com
其中runtimeCaching的配置是专门针对第三方CDN资源的缓存的配置。

ServiceWorker的生效必须依赖HTTPS的，想要对ServiceWorker有具体的了解可以戳这。

这里丢一张本博客的Lighthouse跑分结果：PWA是100分！



提供高质量的内容

这一节，没什么好说的了，就一句话：“博客没货，再好看，速度再快也没用。”

最后感谢github,提供了GitPage这么好的东西，无以为报，只能怒提代码，多提代码了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  博客
相关文章推荐
新的分享
章节导航