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

栏目: 编程工具 · 发布时间: 7年前

内容简介:博客使用静态网站生成技术生成,静态网站生成是指静态生成网站的过程,即生成HTML文件,例如,在本地计算机中,然后将网站文件上载到服务器,该服务器在被请求时向用户提供服务。相比动态网站,有以下优点:目前网上主流的静态站点生成器有三个,分别为Jekyll、Hugo、Hexo。其中Jekyll由Github用Ruby语言构建,您可以免费使用Github Pages来托管您的静态网站,并使用CNAME文件轻松将其与您的自定义顶级域名链接。 它的主要弱点为随着网站内容的增长,构建过程变得非常慢。

博客使用静态网站生成技术生成,静态网站生成是指静态生成网站的过程,即生成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命令行里面安装:

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

    $ hexo init <folder>
    $ cd <folder>
    $ npm install hexo --save
    复制代码

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

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

    #新建文章
    $ hexo new [layout] <title>
    #生成静态文件
    $ hexo generate
    #启动服务器
    $ hexo server
    #部署网站
    $ hexo deploy
    #生成完成后部署
    hexo g -d
    #清除缓存文件 (db.json) 和已生成的静态文件 (public)
    $ hexo clean
    复制代码

Next主题

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

    $ git clone https://github.com/iissnan/hexo-theme-next themes/next
    复制代码

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

    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 仓库)

    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。

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

    debug需要注意的地方,实际问题通过git push origin master返回log查看即可。

  4. Nginx设置 web服务器选择Nginx,Nginx与Apache比较,有如下优点:

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

    常见命令:

    #安装Nginx
    yum install -y nginx
    #启动Nginx服务
    service nginx start
    #测试Nginx配置文件
    nginx -t
    复制代码

    重点说一下Nginx的配置部分

    #配置之前备份一下
    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从权威名称服务器检索dyn.com的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
  • 本文链接:   nephen.cn/2018/11/23/…
  • 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

以上所述就是小编给大家介绍的《怎么快速搭建一个美观实用的博客?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

PHP and MySQL Web Development (3rd Edition) (Developer's Library

PHP and MySQL Web Development (3rd Edition) (Developer's Library

Luke Welling、Laura Thomson / Sams / 2004-09-29 / USD 49.99

We've taken the best and made it even better. The third edition of the best-selling PHP and MySQL Web Development has been updated to include material and code on MySQL 5, PHP 5 and on PHPs object mod......一起来看看 《PHP and MySQL Web Development (3rd Edition) (Developer's Library》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具