写给炫宇的博客搭建指北

我要是能活到现在,肯定是个博客大 V。——鲁迅

注:若实践过程中遇到问题,欢迎提问,博主会看心情决定是否给予指导。

目录

1.预备知识

  1. 必须完全掌握的Markdown(严肃脸)

    Markdown 是一种轻量级标记语言,它以纯文本形式(易读、易写、易更改)编写文档,并最终以HTML格式发布。

    我们写博客,就会用到 Markdown 语言。学会以后,你会发现这个语言用来进行文档排版真实太方便了。

    参考资料: http://www.markdown.cn

    Markdown 编写工具:

    • Visual Studio Code

      当然,它主要是用来写代码的……

    • Typora

      Typora 将「写字」和「预览」这两件事情合并了,你输入的地方,也是输出的地方。

  2. 一点点的 Node.js 知识

    • Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

    • Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。

      本文提到的两种博客的搭建工具都是基于 Node.js 构建而成的。

  3. And Git 的使用方法

  4. 以及一丢丢的 Unix 命令

woc,搭个博客还要懂那么多,不搭了!!!

2.现今流行的几种博客形式

Attention: 本文提到的博客是指不依托于某个社交平台的独立博客,博主可对自己的博客自由 DIY。(您可以尽情发挥您的创造力🧐)

  1. 静态博客

    静态博客没有管理后台及数据库,甚至不需要服务器,静态博客生成器直接根据 Markdown 文件生成 HTML 网页。一般静态博客会托管在 Github、Coding 等代码托管平台,当然,也可以托管在自己的服务器上。

  2. 非静态博客

    • Wordpress

      WordPress ,老牌的博客平台,它是由「世界上最好的语言 」 —— PHP 编写的的个人博客系统,具有完备的后台管理功能。网络上有大量的 WordPress 博客主题,可以自由切换,也可以自己编写。据说使用方式对非相关专业人士比较友好,所以很多设计师、摄影师等职业的人都会选择使用 WordPress。

    • Ghost
      跟 WordPress 类似的个人博客程序,由 Node.js 强力驱动,支持多人的团队博客。相较于 WordPress, Ghost 一个最大的特点就是极致简约。

    • Typlog

      简介略。☺

      ......

3.静态博客的搭建(Github + Hexo 为例)

这个搭建方式对新人来讲并不是很友好……

预备知识

Github

相信作为时尚潮人的炫宇应该已经有 Github 帐号了。So, 略。

Hexo

Hexo 是一个由 Node.js 静态博客生成器,运行需要 Node.js 环境。

简单介绍一下原理

搭建在 Github 的静态博客利用的是 Github Pages 特性:开发者可以为自己的仓库或者为自己建立一个介绍网站。可以在仓库的 Setting 页面指定作为仓库网站的 branch:

1532851936438所以,静态博客相当于是 Github 上面的一个仓库,每次更新博客,相当于向仓库发起了git push

Step0: 创建博客仓库

Github 规定,user site 的仓库名称格式必须是<username>.github.io。搭建完毕之后,就可以使用``.github.io`作为域名来访问博客了。

Snipaste_2018-07-29_18-32-28.png

Step1: 环境配置

1.安装 Node.js 与 Git

在 Mac 上,为方便起见,可以直接从 Node.js 官网上安装 Node.js 的 macOS installer

Git installer 的地址为 http://git-scm.com/download/mac。

2.安装 hexo

打开终端,敲:

npm install -g hexo-cli

注:npm 是 Node.js 的包管理器,安装完 Node.js 就可以使用 npm 了;参数-g的意思为全局安装。若想了解更多关于 npm 的信息,可以看 npm 官网

Step2: 初始化博客文件

环境配置完毕之后,就可以使用 Hexo 初始化博客文件了。

  • 初始化(folder 是指你要创建的文件夹名称):

    hexo init <folder> 
    
  • 进入文件夹

    cd <folder>
    
  • 安装依赖

    npm install
    

初始化完成之后,博客文件夹目录应该是这个样子的:

├── _config.yml  // 博客配置信息文件
├── package.json // 程序的信息文件:包括程序名称、依赖、版本等等
├── scaffolds    // 模板文件夹
├── source       // 资源文件夹
|   ├── _drafts
|   └── _posts   // 博客文章文件夹
└── themes       // 主题 文件夹,Hexo 会根据主题来生成静态页面。

Step3: 配置博客信息

_config.yml这个文件包含着博客的配置信息,可以按需修改它。例如,关于博客网站本身的配置:

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 你的的名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用你电脑的时区。时区列表。比如说:America/New_York, Japan, 和 UTC

配置主题:

theme: impromptu

初始化博客文件夹之后,博客会使用一个自带的默认主题。

这里示例使用的是我写的无比简(jian)约(lou)的主题……

主题名必须与themes文件夹中主题文件夹名保持一致。

配置与 Github 的连接:

deploy:
  type: git
  repo: git@github.com:<username>/<username>.github.io.git

repo项填写的是你想要部署的那个仓库的 ssh 链接。

关于其他配置信息,可以参考 Hexo 的文档:https://hexo.io/zh-cn/docs/configuration

Step4: 写篇文章试试

hexo 提供了新建文章的命令:

hexo new 'Fantastic Xuanyu and Where to Find Her'

这样我就新建了一篇叫Fantastic Xuanyu and Where to Find Her的文章,它的位置位于/source/_posts文件夹中。木有错,这是一个 Markdown 文件。

---
title: Fantastic Xuanyu and Where to Find Her
date: 2018-07-29 17:11:17
tags: 
---

---包裹的相当于是这一篇文章的配置信息,包含了文章名称、日期、标签等信息。hexo 会根据这些信息生成文章页面。在配置信息的下面,你就可以使用 Markdown 语言来写博文了。

Step 5: 本地测试

要在本地预览博客样式并测试,需要先安装 hexo 的服务端模块:hexo-server

npm install --save hexo-server

注: 参数--save的意思,保存依赖信息于package.json。安装完之后再看package.json中的dependencies中了hexo-server的信息。

启动本地 server 预览:

hexo server

程序会有如下提示:

Snipaste_2018-07-29_18-55-05.png

这时候你就可以进入http://localhost:4000看看自己的博客长啥样了。

Step 6: 部署

回想一下静态博客的原理,我们是通过静态博客生成器根据 Markdown 文件生成静态网页,再部署在 Github 上,那么首先要做的就是生成静态网页。

  • 使用 Hexo 生成静态文件:

    hexo generate
    

    敲完命令之后,你会发现博客根目录会多一个public文件夹,这个文件就是由程序生成的静态内容。所谓部署,就是将这个文件中的内容部署到 Github。

  • 部署

    在部署之前,请先确保在_config.yml文件中配置了deploy相关信息。由于我们配置的 deploy 类型为git,首先需要安装 hexo-deployer-git。

    npm install hexo-deployer-git --save
    

    最后,deploy。

    hexo deploy
    

若部署成功,那么 GitHub 上的 .github.io 这个仓库应该已经更新。由于浏览器的缓存问题,需要等待几分钟之后才能通过地址栏成功访问 https://.github.io 。

4.非静态博客的搭建(Ghost 为例)

非静态博客兼具前端和后端,不能托管于某个代码平台,得部署在自己的虚拟主机上。

虚拟主机相关

虚拟主机与服务器

虚拟主机是指在服务器上分出一定的磁盘空间,用户可以租用此部分空间,以供用户放置站点及哇美好应用,提供必要的数据存储和传输功能。我们平常所讲的 VPS(Virtual private server) 也属于虚拟主机(Virtual Host)的一种。

虚拟主机的选购

国内云主机商家:

  • 阿里云
  • 腾讯云
  • ....

国外:

  • Vultr
  • BandwagonHost
  • AWS
  • Heroku
  • ……

通过学生认证能在国内租到一台价格便宜且配置够用的虚拟主机。但是,在国内的虚拟主机搭建网站需要备案,非常麻烦……

在国外的主机商中,我使用过 Vultr 与 BandwagonHost,两者都支持支付宝支付。后者价格比前者便宜,但是 ping 值往往都很低,科学上网体验不佳。

域名相关

同样的,域名可以选择在国内或者国外购买,国内域名需备案。

我选择的国外域名商为 Godaddy,域名为sytone.me。不同的域名后缀,意义不同,价格也不同。

例如.us是国别域名后缀(美国),价格较贵。

炫宇可以想一个十分酷炫的域名。

购买域名之后,如果选择国外的服务器提供商,域名只需要设置好 DNS 解析即可使用。

DNS 解析

DNS解析的目的是为了告诉所有访问这个域名的浏览器,应该访问哪个 IP 地址的主机。

互联网中的网络地址本质上就是数字的 IP 地址,域名作用主要就是为了便于记忆。

我使用的 DNS 解析服务是DNSPod

搭建

SSH

Secure Shell(安全外壳协议,简称SSH)是一种加密的网络传输协议,可在不安全的网络中为网络服务提供安全的传输环境。SSH通过在网络中创建安全隧道来实现SSH客户端与服务器之间的连接。虽然任何网络服务都可以通过SSH实现安全传输,SSH最常见的用途是远程登录系统,人们通常利用SSH来传输命令行界面和远程执行命令。 ——维基百科

购买完主机之后,需要在本地通过 SSH 连接主机来远程执行命令。

常用的一个用来连接主机的命令:

ssh <username>@<主机的ip>

回车之后会要求你输入该用户的密码。

ssh 参考资料:https://www.ssh.com/ssh/command/#sec-Using-the-Linux-client

Tips

Ghost 的官方文档已经很详细的描述了如何在主机上安装 Ghost 程序。但是 Ghost 对主机系统的类型是有所限制的:

  • 系统:Ubuntu 16.04
  • 数据库:MYSQL
  • Web 服务器:NGINX
  • 系统和服务管理器: Systemd
  • 至少 1GB 内存
  • 在使用 Ghost 命令时,必须是非 root 用户

购买主机时,请认准 Ubuntu 16.04 。

node 环境准备

Snipaste_2018-07-29_21-17-56.png

根据 Ghost 推荐的,我们选择 8.9 版本以上的 Node。

通过 ssh 连接主机后,输入命令:

curl -sL https://deb.nodesource.com/setup_8.11.3 | sudo -E bash -
sudo apt-get install -y nodejs

安装完成之后,可以通过以下命令检测是否安装成功,若成功,返回版本号。

node --version
v8.11.3

MYSQL 环境准备

  1. 安装

    sudo apt-get update
    sudo apt-get install mysql-server
    

    在安装期间,系统会让设置数据库 root 用户的密码。千万请记住你设置的密码……

  2. 配置

    mysql_secure_installation
    

    这条命令是在执行一个安全脚本,会向你确认几个问题。你可以按 Y 或者回车键接受所有后续问题的默认答案。

  3. 测试

    在你安装完成的时候,Mysql 应该已经自动运行了,你可以通过以下命令进行测试:

    systemctl status mysql.service
    

    一般来讲,你可以看到以下输出:

    ● mysql.service - MySQL Community Server
       Loaded: loaded (/lib/systemd/system/mysql.service; enabled; vendor preset: en
       Active: active (running) since Wed 2016-11-23 21:21:25 UTC; 30min ago
     Main PID: 3754 (mysqld)
        Tasks: 28
       Memory: 142.3M
          CPU: 1.994s
       CGroup: /system.slice/mysql.service
               └─3754 /usr/sbin/mysqld
    

    启动 Mysql 的命令:

    sudo systemctl start mysql
    

参考资料:https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-16-04

Ghost

关于 Ghost 程序本身的安装,可以参考Ghost 官方文档

5.优秀博客推荐

  • Impromptu (墙裂推荐)
  • 一天世界,强调对技术与艺术的敏锐感受力、以及精神与肉体上的强健。
  • 利器访谈,利器采访优秀的创造者,邀请他们来分享工作时所使用的工具,以及使用工具的方式和原则。
  • limboy,程序员、设计师、创作者
  • Apple4us,关键词:Apple、互联网、文化
  • Paul Graham, Y Combinator 创始人。
Show Comments