Hello World (Hexo - 建立个人独立博客)

2017-09-08 更新:Next主题更新后,Disqus居然消失了,现在不能留言啦。
2017-09-27 更新:留言换做gitment

Hello, World

Wordpress,Blogger,Tumblr,……,统统不入法眼,程序员喜欢自己动手。

Hexo + Next + Github = 个人独立博客
以下内容是在Mac OS上完成,Windows可以参考(建议使用cygwin)。

domain

首先,你得要有台Mac,然后得有个域名(domain),不知道啥是域名就不要在网上混了。但是起个好域名其实是所有工作中最难的,因为好名字都被狗注册了。起名字不是个技术活,主要靠自己异想天开吧。

注册域名的地方多如牛毛,国外出名的如NamecheapGoDaddy,关键是找个便宜的,看看有没有promotion。

brew

接下来得”装”,brew是Mac上的安装程序,不知道啥是brew就不要用Mac了。先装brew,命令行一条就搞定,然后一通『brew install』:

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • 需要用到git,所谓的source version control;
  • node.js,因为Hexo是用基于Node & Javascript开发的,Node是个Javascript Server Engine,是个Javascript神器,这些年Javascript已经上升为宇宙第一编程语言,以后心情好再多聊聊;
$ brew upgrade
$ brew update
$ brew install git
$ brew install node

Github

Github既可做源代码版本控制也可用作免费的博客服务器,博客的文件统统存在Github上。不知道Git/Github是啥的程序员绝对是可以回家种地瓜,不懂的话自己找个搭车的时间补补课(网上Git资料是相当丰富的,当然知乎上也有个『小白教程』,我有机会会聊聊Git。

Git的全局配置,如果还没有配置的话:

$ git config --global user.name "fastzhong"
$ git config --global user.email "me@gmail.com"

Github允许http或者SSH连接,SSH可使用key,这样不需要每次提交时输入用户名和密码,所以选择SSH。配置SSH的config文件通过Host别名支持不同的SSH连接和key,config的配置格式参考这里。我有机会会聊聊SSH。

$ SSH-keygen -t rsa -b 4096 -C "me@gmail.com"
$ cd ~/.ssh
$ mv id_rsa id_rsa_fastzhong
$ mv id_rsa.pub id_rsa_fastzhong.pub
$ touch config
$ chmod 600 config
$ vim config
$ cat config
Host github-fastzhong
HostName github.com
User git
IdentityFile ~/.ssh/id_rsa_fastzhong
Host coding-fastzhong
Hostname git.coding.net
User git
IdentityFile ~/.ssh/id_rsa_fastzhong
$ SSH-add ~/.ssh/id_rsa_fastzhong
$ clip < ~/.ssh/id_rsa_fastzhong.pub

现在可以把公钥(id_rsa_fastzhong.pub)加到Github上,参考这里,然后测试一把:

$ ssh -T github-fastzhong
Hi fastzhong! You've successfully authenticated,but GitHub does not provide shell access.
$ ssh -T coding-fastzhong
Coding.net Tips : [Hello! You've connected to Coding.net via SSH. This is a deploy key.]

卧槽,居然成功了。Github用来作为博客服务器必须符合它规定的条件,详见Github Page,需要做的是:

  • 在Github上create一个username.github.io的repository,例如fastzhong.github.io
  • 匹配自定义域名(fastzhong.com)的话,需要添加一个CNAME文件,把博客域名放进去,否则只能通过默认的username.github.io来访问。

    $ cat CNAME
    fastzhong.com
  • 拿到username.github.io的ip:

    $ ping fastzhong.github.io
    Pinging sni.github.map.fastly.net [151.101.41.147] with 32 bytes of data:
    Reply from 151.101.41.147: bytes=32 time=182ms TTL=53
  • DNS服务器上设置一个A Record,让@指向IP地址151.101.41.147(有的DNS服务器不支持@的CNAME Record,否则可以让@直接指向fastzhong.github.io)

  • 如果有子域名,如www.fastzhong.com,再设置一个CNAME Record,让www指向fastzhong.github.io

Hexo & Next

传统的博客系统如WordPress,CSDN博客,新浪博客等等,你只管写博客内容,其它一概交给系统。但是程序猿或者所谓的hacker感觉不爽,就像自己撸代码和只是运行程序玩的感觉是不同的,所以静态博客生成器就诞生了。对我而言,独立博客的最大好处是博客的内容是属于自己的,而不是『掌控』在博客系统里,说穿了就是有种可以玩弄于掌股之间的感觉。

静态博客生成器多如牛毛,各种比较在此:

我选择的是Hexo,主题选择Next

安装

我把博客放在Google Drive下的一个目录里(fastzhong.com),这样可以在不同的机器上编辑,也不怕硬盘坏掉:

$ cd ~/Google\ Drive/
$ mkdir fastzhong.com
$ cd fastzhong.com
$ npm install -g hexo
$ hexo init
$ npm install
$ cat package.json
$ npm install hexo-generator-cname --save
$ npm install hexo-generator-feed --save
$ npm install hexo-generator-search --save
$ npm install hexo-generator-searchdb --save
$ npm install hexo-generator-seo-friendly-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save
$ npm install hexo-deployer-git --save
$ npm install hexo-wordcount --save
$ npm install aplayer --save
$ npm install dplayer --save
$ npm install hexo-tag-aplayer --save
$ npm install hexo-tag-dplayer --save
$ cat package.json
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

装了几个plugins(npm install xxx –save), 用途一目了然。

配置

HexoNext的文档以及配置里的注解都挺清晰的,跟着一步一步做就行了:

修改Hexo的_config.yml并添加相应的文件:

  • local search:

    search:
    path: search.xml
    field: post
  • deploy:

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
    - type: git
    repo: git@github-fastzhong:fastzhong/fastzhong.github.io.git
    branch: master
    - type: git
    repo: git@coding-fastzhong:fastzhong/fastzhong.git
    branch: master

注意repo的写法是SSH而非https,而且host改成github-fastzhong,和SSH的config对应(见上面)。

修改Next的_config.yml并添加相应的文件:

  • favicon.ico
  • social
  • avatar
  • links
  • Duoshuo ShortName
  • jiathis
  • google_analytics
  • duoshuo_info
  • wechatpay

Markdown

Markdown是一种极简的标识性语言,5分钟就可以上手:怎样引导新手使用 Markdown?
Markdown的编辑器也是一堆的,码字必备:18款优秀的Markdown写作工具 | 2015 年度盘点

MarkdownPad,Typora等等都不错,就是有bug不稳定,我偷懒就用IntelliJ + Markdown plugin。

使用

通常博客编辑流程是:

  1. 用Markdown编辑博客文章(source/_posts目录下)
  2. 清理所有生成的博客 hexo c
  3. 重新生成博客 hexo g
  4. 在本地浏览 hexo s
  5. 部署到服务器上 hexo d

Create a new post

$ hexo new "My New Post"

More info: Writing

Clean & Generate static files

$ hexo c
$ hexo g

More info: Generating

Run server

$ hexo s

本地可以浏览 http://localhost:4000 , more info: Server

Deploy to remote sites

$ hexo d

更新至Github,more info: Deployment

这个命令在Windows上似乎是有问题的,可以直接到.deploy_git/下git push。

更多

搞到这,基本成了,有一些进一步的工作:

photo

图片或视频这类东西一般较大,占据磁盘文件读写和网页流量大部分比例,可以把它们从源代码里分离出来,托管在云存储(S3,Dropbox,等等),或放到专门图床上,通过他们加速加载,国内最出名的图床应该是七牛,可是注个册居然要手机号码,不知道手机号码属于个人隐私吗,国内就是个流氓环境,国人已经麻木了。目前我选用的是微博,弄个Chrome插件。弄大点可以考虑自建图床和CDN。

CDN

除了图片可以通过缓存加速外,网页也是可以的,免费的有好几家,不过个人博客不大,目前暂时忽略。

sitemap

博客做好后,可以立马通知Google和百度的爬虫来爬一爬,Hexo会自动生成sitemap,在生成的博客文件夹(public)里。
Google sitemap上传:https://support.google.com/webmasters/answer/183668?hl=en#addsitemap
百度sitemap上传:http://zhanzhang.baidu.com/abc/index

analytics

Google和百度还提供网站流量分析报告,想要搞成专业博客的话可以研究一下。
Google Analytics: https://support.google.com/analytics/answer/1008015?hl=en
百度统计分析:http://tongji.baidu.com/web/welcome/login

翻墙

最后如果是海外的博客,放在Gitlab上,会被墙的或者不稳定,所以要同时考虑国内外的用户,同样可以在国内建立一个镜像。这个得分两个步骤:

  • 第一步找个国内Github的山寨版coding.net或者gitee.com
    这个做法和Github类似,先注册coding,然后配置SSH(见前面Github),创建coding项目,配置hexo(部署部分增加一行,见上面)。然后使用coding的pages服务,设置『部署分支』和绑定『自定义域名』,参考帮助
    coding-pages

  • 第二步找个“智能”DNS,国内用户访问时,把他们导到国内Github的山寨版那去;国外用户则是正常访问。具体做法是用DNSPad这个神器。首先让DNS Server指向DNSPod,由DNSPod来做域名解析,通常这个设置在域名注册服务商那里完成。然后就在DNSPod里设置同样的域名国内国外采用不同的服务器:
    DNSPod

参考:

  • coding.net的pages服务
  • gitee.com的pages服务,码云的pages服务似乎还未支持自定义域名

撸到这里,差不多了,感谢生活在互联网的时代。

显示 Gitment 评论