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

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

内容简介:博客使用静态网站生成技术生成,静态网站生成是指静态生成网站的过程,即生成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 许可协议。转载请注明出处!

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

查看所有标签

猜你喜欢:

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

五子连珠必胜法

五子连珠必胜法

新井华石 / 张书 / 人民体育出版社 / 1997-10 / 12.00元

《五子连珠必胜法》经日本国虹有社授权,译自日本连珠社已故理事长新井华石九段经典著作《连珠必胜法》一书。内容阐述和介绍五子连珠的基本着法和各种常用的布局定式。全书分两大编。连珠基本编介绍连珠棋的发展历史、连珠棋的规则和规定以及基本珠形。连珠必胜编分为六章分别阐述和介绍各种常用布局定式,包括二号连浦月、五号连花月、一号连云月、二号桂名月、三号桂岚月、二号间恒星六种布局定式。一起来看看 《五子连珠必胜法》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具