搭建个人博客

1.总览

1.1 简介

因为我当初加入比特后不精学，对前端的兴趣一般，
而且不知道该去认真学些什么、怎么学，经过近两年的摸爬滚打，
此时的我已经是大杂烩的模样。
因此，本次分享会介绍为大家点明学习的路线，了解将来极可能要接触到的方方面面，以及激发一些兴趣。
本章会把我在比特两年中 (的黑历史) 学到的知识 (毕生所学) 通过搭建个人博客的搭建并部署分享出来

1.2 本章主要流程

搭建博客开发环境 ----> 初步尝试博客开发 ----> 将博客部署到云服务器中

1.3 提前准备

• Hexo是一款基于 Node.js 用于快速搭建博客的框架，有了它就可以完成完成个人博客的构建，它会帮你构建博客的整个框架，你只需要会使用Markdown 写博客即可。
• ButterflyButterfly 博客主题。A Simple and Card UI Design theme for Hexo.
• Node.js 是一个基于Chrome V8引擎的JavaScript运行环境。安装好node.js后利用npm包管理工具来安装Hexo
• Git是目前世界上最先进的分布式版本控制系统（没有之一）。对项目的备份，部署等等都大有用处。
• linux是一种自由和开放源码的类 UNIX 操作系统。能支持POSIX的多用户、多任务、支持多线程和多CPU，一般服务器就是都是linux。
• Centos是Linux发行版之一，还有如Debin Ubuntu等版本的linux系统可供选择。

1.3 涉及内容参考资料

• 搜索
  • 谷歌(推荐)
    • 谷歌镜像
  • 百度
• 百科 ———— 了解新事物的最快途径
  • 百度百科
  • 维基百科
• 菜鸟教程
• 10分钟带你了解互联网是如何运作的！
• 浏览器是如何运作的？
• 官方文档
  • Node.js
    • npm
    • Vue.js
    • React
  • Git
  • Hexo
  • Butterfly

2.搭建本地博客开发环境

2.1 安装Git

下载链接：Git

安装过程中建议把Git GUI和Git Bash添加到右键菜单的选项取消的
其他的一路默认即可

2.2 安装node.js

2.2.1 下载

下载链接: node.js

为啥下载node.js？
因为这个安装包也会安装npm，我们要用的就是npm

2.2.2 设置npm镜像源

因为npm的下载库来源于国外(npmjs.org),速度极慢且不稳定，这里建议使用国内阿里云镜像

npm config set registry https://registry.npm.taobao.org

2.2.3 npm全局安装Hexo

npm install -g hexo-cli

2.2.4 查看Hexo是否安装成功

hexo -v

2.3 搭建基础工作区

2.3.1 初始化

在你喜欢的地方新建一个文件夹Blog，并用VScode打开

按下Ctrl+~打开 命令行，输入：

hexo init

成功安装后，目录如下

2.3.2 生产静态页面

hexo g

完成后会生成一个public文件夹，里面便是一个博客网站的内容部分

2.3.3 开启本地服务器

hexo s

输入完成之后 访问 http://localhost:4000，便有Hexo博客初始化的页面

2.3.4 新建文章

hexo new MyFirstBlog

输入之后source/_posts下会生成MyFirstBlog.md文件

填写部分内容后，博客里便就多了一篇自己的文章

2.4 使用Butterfly主题

2.4.1 安装Butterfly主题

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

github.com最近不太安稳，经常被墙，这里建议大家自行寻找翻墙方法
提示: 需要配置git代理

安装完成后，会多出一个Butterfly的文件夹，里面会有其主题的内容及配置文件

2.4.2 应用Butterfly主题

修改站点配置文件_config.yml，把主题改为butterfly

#theme: landscape
theme: butterfly

2.4.3 安装相关插件

npm install hexo-renderer-pug hexo-renderer-stylus --save
这里建议再安装一个比较有用的插件 —— hexo-browsersync(游览器实时更新，方便预览效果)
npm install hexo-browsersync --save

2.4.4 生成一个Butterfly主题的Hexo博客

hexo clean #清楚缓存文件
hexo g #生成发布用的静态页面
hexo s #重启本地服务器
#以上指令之后经常用到

步骤没有错误的话，现在你已经成功应用主题

想要得到各种特效和功能，请仔细参考Butterfly文档

3.拥有一个云服务器

3.1 (充钱) 购买云服务器

服务器推荐腾讯云或者阿里云的轻量应用服务器(价格便宜，带宽高)，个人极力推荐腾讯云的香港轻量应用服务器，因为香港轻量路线好带宽高延迟低，最关键的是能用访问外网，可以用来自行搭建梯子。

下面例子使用的是腾讯云的服务器

3.2 部署云服务器

3.2.1 选择轻量应用服务器

进入之后点击立即选购

3.2.2 选择服务器配置

因为腾讯香港轻量太香了，每天都会卖完。但每天早上10点整会补货。

3.2.3 成功部署

购买完成后，可进入控制台管理服务器。

3.3 连接至云服务器

TODO:串讲端口，IP，域名，常见端口，代理

3.3.1 提前准备

• 端口 : TCP/IP协议，一个应用跑在一个端口上
  • 各种服务常用端口号
• IP : 网际互连协议。路由器在互联网下有唯一IP(公网)，联网设备在路由器下也有IP(局域网)
  • 干货：计算机网络中那些常见的IP地址
  • 127.0.0.1 : 本地地址 (仅对本机有效)
  • 192.168.x.x : 私有地址，设备在路由器下被分配的地址，可以通过此地址来经行分享文件，发送网络请求等操作。
• 域名 : 通过DNS服务器解析出IP地址，再连接到此IP地址。
  • localhost : 本地地址 (C:\Windows\System32\drivers\etc下的hosts文件解析出的)
• ssh : 安全外壳协议。通过xshell等工具用ssh协议连接上云服务器。

3.3.2 查看服务器的信息

打开(阿里云/腾讯云)控制台，点击自己的服务器查看信息

需要留意的是 公网 IP

linux会有一个root(超级管理员)账号，也注册有其他不同权限的账号

3.3.3 重置 root 账号的密码

点击重置密码，更改root账号密码。

3.3.4 使用 SSH 连接服务器

打开终端(win+R,输入cmd并回车)

# 连接到服务器
# ssh root@公网IP
ssh root@110.42.175.5

会有以上的警告，输入 yes 并回车，在输入自己的密码

成功登陆

4.部署个人博客至服务器中

参考文章: 将Hexo部署到自己的服务器上

4.1 提前准备

• nginx：高性能的HTTP和反向代理web服务器。
• Git：这里使用Git来将服务器部署到服务器中。
• SSH密钥：是一种无须密码登录Linux实例的认证方式。

4.2 安装需要的环境

#更新各种已经安装的软件
yum -y update
#安装git
yum -y install git
#安装nginx
yum -y install nginx 

4.3 创建 git 仓库

# 新建文件夹在 /var/APP/blog 下
mkdir /var/APP
mkdir /var/APP/blog
# 创建一个名叫blog的空仓库
git init --bare /var/APP/blog/blog.git

4.4 为该仓库添加钩子

# 使用 vim 文本编辑器打开文件
vim /var/APP/blog/blog.git/hooks/post-receive

在 post-receive 添加以下内容并保存

cd /var/APP/blog &&
git --work-tree=. --git-dir=./blog.git checkout -f

使能钩子

# 赋予其可执行权限
chmod +x /var/APP/blog/blog.git/hooks/post-receive

4.5 配置Nginx

# 创建 blog 的nginx配置文件
vim /etc/nginx/conf.d/blog.conf

blog.conf的内容如下:

server {
    listen  80;
    root /var/APP/blog;
    server_name 110.42.175.5;
    index index.php index.html index.htm default.php default.htm default.html;
    location /{
        root /var/APP/blog
    }
}

填写完成后保存退出，并重新启动nginx

service nginx restart

4.7 本地一键部署到服务器

打开本地博客工作区，打开_config.yml并配置deploy选项。

# 一键部署
hexo d

5 结语

个人觉得写博客能坚持下来就能收益很多，如果在学习阶段多记录过程，对以后找工作会有不少帮助。