怎么快速搭建一个美观实用的博客?

博客使用静态网站生成技术生成,静态网站生成是指静态生成网站的过程,即生成HTML文件,例如,在本地计算机中,然后将网站文件上载到服务器,该服务器在被请求时向用户提供服务。相比动态网站,有以下优点:

  • 内容存储为平面文件,因此不需要数据库
  • 静态网站不需要动态服务器端处理
  • 静态网站比动态网站超快,因为它们不需要服务器端处理或数据库访问
  • 静态网站比任何动态网站都更安全,因为可以利用的安全漏洞更少
  • 缓存静态文件比缓存动态页面更有效

目前网上主流的静态站点生成器有三个,分别为Jekyll、Hugo、Hexo。
其中Jekyll由Github用Ruby语言构建,您可以免费使用Github Pages来托管您的静态网站,并使用CNAME文件轻松将其与您的自定义顶级域名链接。
它的主要弱点为随着网站内容的增长,构建过程变得非常慢。
另外,Hugo是一个用Go构建的静态站点生成器。它被宣传为“世界上最快的网站构建框架”。它最近与Jekyll相比,但在人气方面迅速增长。
它的主要缺点为可扩展性差和插件少。
而Hexo是基于Node的开源静态生成器,可在MIT许可下使用。借助Node.js平台,Hexo允许您在几秒钟内生成数百个静态文件。
主要有以下优点:

  • 快速而令人难以置信的速度
  • 使用一个部署命令部署到Github页面或任何其他主机
  • 强大的Markdown支持
  • 高度可扩展
  • 可用的免费和开源主题
  • 可用的免费插件

而且它的缺点是:Hexo有一个相对较大的社区,但大多数是非英语人士(来自中国),这个缺点从我们的角度来看就是优点啊。

根据以上分析,我采用的总体方案为:采用Hexo进行博客创建,其中使用Next主题进行配置,将生成的博客静态网站部署在自己搭建的vps服务器上,最后采用dnspot对域名进行解析。具体细节见下文。

Hexo环境搭建

  1. 安装
    参照https://hexo.io/zh-cn/docs/ 网站,主要包括Node.js、Hexo和Git安装,Node.js、Git可以直接下载安装包安装,Hexo可以在Git Bash命令行里面安装:

    1
    $ npm install -g hexo-cli
  2. 建站
    环境搭建好后就可以开始建站了,同样在Git Bash里面输入命令行进行:

    1
    2
    3
    $ hexo init <folder>
    $ cd <folder>
    $ npm install hexo --save

    其中folder为你要建立的博客的文件夹。

  3. 相关命令
    站点建立好后,就可以开始写文章了,可以使用sublime编辑软件打开刚刚建好的folder博客文件夹,找到source/_posts目录即为要写的文章地址。
    涉及到的一些命令如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #新建文章
    $ hexo new [layout] <title>
    #生成静态文件
    $ hexo generate
    #启动服务器
    $ hexo server
    #部署网站
    $ hexo deploy
    #生成完成后部署
    hexo g -d
    #清除缓存文件 (db.json) 和已生成的静态文件 (public)
    $ hexo clean

Next主题

  1. 下载使用
    进入之前建好的博客文件夹根目录,打开Git Bash,使用git命令进行Next源代码下载:

    1
    $ git clone https://github.com/iissnan/hexo-theme-next themes/next

    Git怎么使用子模块?
    通过在 git submodule add 命令后面加上想要跟踪的项目 URL 来添加新的子模块:

    1
    2
    3
    4
    5
    git submodule add https://github.com/iissnan/hexo-theme-next themes/next
    #查看
    cat .gitmodules
    #保持更新
    git submodule update --init --recursive
  2. 配置使用
    关于Next主题的配置使用,直接看官网就好。

Hexo本地配置

  1. 主题配置
    打开站点配置文件_config.yml,位于跟目录下,可以选择使用Next作为主题,参照官网进行配置就好。

  2. 部署配置
    部署其实就是怎么把生成的静态网站上传到服务器端,把部署方式和地址说明一下,我这里采用的是自己搭建的git服务器,也可以是github(那就要在github上新建 blogname-github-io 仓库)

    1
    2
    3
    4
    deploy: 
    type: git
    repo: git@你的服务器IP:/home/git/blog.git
    branch: master

VPS搭建Hexo博客

作为自己搭建服务器来说,这部分是重点了。

  1. 什么是vps?
    VPS(Virtual Private Server 虚拟专用服务器)技术,将一台服务器分割成多个虚拟专享服务器的优质服务。比如搬瓦工VPS是一款性价比较高的便宜VPS主机,且适合入门级网友学习Linux、建站和软件调试用途。搬瓦工VPS目前有洛杉矶MC、洛杉矶QN、凤凰城、佛罗里达、荷兰这8个数据中心,对中文速度较好的是洛杉矶和凤凰城。
  2. 基本原理
    在服务器上搭建一个Git仓库。在本地Hexo执行deploy后,博客文件会被push到这个Git仓库,然后这个仓库又会通过一个git-hooks的功能把文件同步到VPS的网站根目录,经过Nginx代理服务把网站展现给用户。参考下图
  3. Git服务器设置
    在.git/hooks文件夹中创建一个钩子文件:post-receive,注意没有后缀.sample,这样每当git仓库接收到内容的时候,就会自动调用这个钩子,把内容同步到网站根目录。需要修改post-receive权限使其可执行,chown git:git -R post-update/chmod +x post-update,需要保证TARGET已经创建,并且该目录以及子目录的权限属于git,这点很重要,否则会报Permission denied的错误。

    debug需要注意的地方,实际问题通过git push origin master返回log查看即可。
  4. Nginx设置
    web服务器选择Nginx,Nginx与Apache比较,有如下优点:

    • Nginx轻量级,占用资源少,负载均衡,高并发处理强,静态内容处理高效。
    • Apache拥有丰富的模块组件支持,稳定性强,BUG少,动态内容处理强。

      常见命令:

      1
      2
      3
      4
      5
      6
      #安装Nginx
      yum install -y nginx
      #启动Nginx服务
      service nginx start
      #测试Nginx配置文件
      nginx -t

      重点说一下Nginx的配置部分

      1
      2
      3
      4
      5
      6
      #配置之前备份一下
      cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.bak
      #修改默认端口号
      vi /etc/nginx/conf.d/default.conf
      #修改配置文件
      vim /etc/nginx/nginx.conf

      这样配置好后就可以通过http://vps服务器地址:端口号 来访问站点了。

域名解析

最后一步,也是最难理解的一步,将服务器地址解析到域名。首先得买一个域名,通过一些相关的设定后,以后直接通过访问域名来访问站点了。

  1. 概念解读
    需要了解一些常识,什么叫DNS?
    DNS(域名系统)是一个庞大的服务器网络,包含地球上最大的数字数据库。该数据库由多个互联网机构维护,管理和监管,包括IANA(互联网号码分配机构)和ICANN(互联网名称与数字地址分配机构)。
    DNS是互联网的中央数据库,如果没有它,互联网将不会像现在一样存在。
    它一般处理的数据包括:

    • 名字(name):指的是域名
    • 资源(resource):包括A(主机地址,一般就是主机的IP)、NS(域名服务器记录(Name Server),返回保存下一级域名信息的服务器地址。该记录只能设置为域名,不能设置为IP地址。)、CNAME(规范名称记录(Canonical Name),返回另一个域名,即当前查询的域名是另一个域名的跳转)、MX(邮件记录(Mail eXchange),返回接收电子邮件的服务器地址)、TXT(任意字符串)等等。

      基本处理原理见下图,下面会结合具体例子进行解读:

      另外处理数据里面包含的NS指的是什么呢?它是名称服务器,是安装有DNS软件的Web服务器,特别是由Web主机管理的服务器,该主机专门用于管理与所有主机提供商的帐户关联的域名。

  2. dnspot设置
    使用dnspos进行设定,注册账号就可以,这就是一个dns服务器,在国内,解析的比较快,设定如下:

    由于我是用godaddy购买的域名,还要在godaddy里面告诉它我使用了第三方的dns服务器,不使用dodaddy自带的了,因为自带的服务器在国外,解析肯定会慢些。

  3. 深扒dns
    可能你还是不理解什么叫dns,它是怎么工作的?我们使用dig工具来深入解读一下域名nephen.cn是怎么解析出它具体的服务器地址的?
    如果你使用的是linux系统,本身就自带了dig命令,如果是windows系统,使用网页版工具diggui就好了。
    输入如下:

    得出输出结果:

    再一一解读一下:

  • 计算机查找相应IP地址的第一个位置是其本地DNS缓存,该缓存存储计算机最近检索到的信息,如果没有则进行DNS检索查询。
  • dig问8.8.8.8:根区域的名称服务器是什么?
    8.8.8.8回复:名称服务器为a.root-servers.net…
    dig随机挑选了k.root-servers.net并解析为193.0.14.129,端口号为53
  • dig问193.0.14.129:nephen.cn的地址是多少?
    193.0.14.129回复:我不知道,你可以问下cn.名称服务器,他们是a.dns.cn. … f.dns.cn.
    dig随机选择了e.dns.cn,解析地址为203.119.29.1,端口号为53
  • dig问203.119.29.1:nephen.cn的地址是多少?
    203.119.29.1回复:我不知道,可以问下nephen.cn名称服务器,他们是f1g1ns1.dnspod.net.,f1g1ns2.dnspod.net.
    dig随机选择了f1g1ns1.dnspod.net,解析地址为58.247.212.36,端口号为53
  • dig问58.247.212.36:nephen.cn的地址是多少?
    58.247.212.36回复:23.106.149.209
    如果使用的是nephen.github.io托管网页,那这里会回答为CNAME为nephen.github.io,重新进行递归查找真正的地址
  • 递归服务器8.8.8.8从权威名称服务器检索nephen.cn的A记录,并将记录存储在其本地缓存中,缓存TTL时间更新一次。
    如果有其他人请求nephen.cn的主机记录,递归服务器将已经有了答案,不需要再次进行查找过程
    DNS解析器在查询DNS服务器之前始终检查本地缓存,包括当前DNS解析器缓存内容和从Hosts文件预加载的条目
    相关命令:C:> ipconfig /displaydns、C:> ipconfig /flushdns
  • 递归服务器会将A记录返回给您的计算机。您的计算机将记录存储在其缓存中,从记录中读取IP地址,然后将此信息传递给您的浏览器。

当然windows也有自带的nslookup可以查询,直接就能查出解析后的地址,其中208.67.222.222为手动选择的递归服务器,跟上面例子中的8.8.8.8是一个性质的。

还可以使用一些别的网络工具,随便推荐几个:

以上就是建站的整个过程,夹杂了一些对问题的思考,希望对你有所启发,每一个技术问题背后其实有很多东西需要弄明白的,当我们搞清楚以后心里才会觉得更加踏实,从另一个层面来讲,弄清楚了底层的技术原理,对出现问题也能更加快速的定位,对出现新的技术也能触类旁通。

nephen wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
坚持原创技术分享,您的支持将鼓励我继续创作!