查看博主网站

序言

当看到别人博客网站很酷时，就觉得自己要是能去搞一个就好了。当然我是网页设计小白，单纯就是想搞个自己的网站就来接触并部署了，主打一个撸起手袖就是干。

因为有QT设计软件的基础，所以看着这些网页设计的东西，多多少少有点眼熟，稍微转化下语言和一些语法，也大概能看的懂和使用。

当很多人想去部署设计自己的网站时，都会第一时间去浏览器搜索某某教程，但是一般搜索出来都是不完整的或者是要很有相关知识的才可以进行复现的。此时就会令新手开发部署一个网站难以进行。所以记录下自己搭建个人博客的过程，希望对你有所帮助。

本地网站

本地网站，顾名思义，该网站是本地的，只能本地浏览，而别人在网络上是查看不到的。类似于开发，在本地搭建和开发后，确认没什么大问题再进行发布出去。这也是一般的开发和发布先后顺序。

开发工具

一个好的开发工具可以让你开发起来得心应手。当然在应用工具时还需要查看是否有版权限制，这里推荐使用的是开源免费的开发工具，也是目前程序设计和开发人员使用较多的开发工具：VScode。

VScode

点击前往VScode官网

Visual Studio Code（简称“VS Code” ）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。

VScode可以用任何语言进行编写代码，它几乎支持所有主流编程语言。其中包含了Java、python、C++、PHP、HEML等等变成语言，可以在扩展中进行安装并使用。

该工具不仅支持多语言编程，而且内嵌了大量的扩展功能以及AI编程助手，轻轻松松让你快速上手编程开发，易如反掌。

框架

框架（framework）是一个框子——指其约束性，也是一个架子——指其支撑性。是一个基本概念上的结构，用于去解决或者处理复杂的问题
框架这个广泛的定义使用的十分流行，尤其在软件概念。框架也能用于机械结构。

其实说白了，框架就是比人造好的轮子，自己开发搞东西不需要再去造轮子，直接拿别人造好的轮子过来用即可。

比如盖房子，出街看到那些楼房，大多框架都差不多的，除了一些形状或者装饰不一样。这就是框架的作用，只需要跟着框架去盖房子，房子肯定不会倒，想要漂亮点，就根据自己的需求和审美自由去修改。相信该简单的例子你对框架已经有所了解。

在学校老师教导知识和技术，都会喊你一行行地根据原理等进行敲代码实现。但是现实社会和企业中，进行开发设计，大部分都是在已有的框架下进行开发和设计的（除非你的工作本身就是去研究和创新出新框架）。毕竟开源大法好，不是浪得虚名哈哈哈哈哈哈。

因此我们开发个人博客时，也是首先挑选博客框架，本博客选的是Hexo框架。

Hexo

点击前往Hexo官网

Hexo 是一个快速、简单且功能强大的博客框架。你用Markdown（或其他标记语言）写帖子，Hexo 会在几秒钟内生成带有漂亮主题的静态文件。

Hexo博客框架的一些特点：

超快速度
Node.js 所带来的超快生成速度。上百个页面在几秒内完成渲染。
支持Markdown
Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
一键部署
只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。
丰富的插件
强大的 API 带来无限的可能。支持数种模板引擎（EJS，Pug，Nunjucks等）。可以与现有的NPM包 (Babel, PostCSS, Less/Sass 等) 轻松地集成。
多样的主题
已有400+主题，在众多美观、强大、可定制的主题中选择。
使用任何兼容的末班引擎创建自己的主题。

本地环境

代码开发是需要环境才可以的，毕竟盖房子也是需要原材料和工具的。根据以下设置进行一些必要的环境配置。

git使用

Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。Git 与常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本库的方式，不必服务器端软件支持。

git没用过没关系，当成是一个远程操控的软件即可。它的作用主要是将你在本地开发好的代码和工具进行发送到云端上。或者你在不同的电脑进行本地开发，又没有进行资料拷贝，那么也可以用git进行在云端上拉取到本地进行开发。

点击进行git相关知识学习点击进官网下载

安装过程中记录下安装的路径（后续需要用到）

安装完成后，要进行相关的环境变量配置，首先打开环境变量设置

- win + R:输入 sysdm.cpl 并回车
- 会打开一个系统属性窗口，在最上面标题点击高级，然后会看到环境变量，点击打开环境变量设置
- 在环境变量设置窗口中，选择Path进行编辑，然后新建签名安装目录路径下的cmd文件路径

安装完成+环境配置好后，在空白处鼠标右键可以看到有Git Bash Here就完成了。可以直接点击使用了。

node.js

点击进官网下载

下载安装LTS版本的，是长期支持版本，确保稳定运行。

Hexo部署

安装

在桌面空白处鼠标右击，打开git bash here输入命令安装（默认位置即可，方面后续配置，不建议修改）

npm install -g hexo-cli

回车执行，自动执行完即可

初始化

选择你本地网站搭建的本地路径（C盘除外的任意盘），选定好路径后，新建文件夹并命名hexo-你喜欢的名字-blog（比如我的：hexo-kimbell-blog）。

建好文件夹后，进去到文件夹里，鼠标右击进行git bash here输入命令

hexo init

安装如果出现报错一般是网络问题，多试几次即可，更多参考
报错集

安装成果会显示 **Start blogging with Hexo!**字样的，刚刚新建的那个文件夹路径，以下均称为根目录。

根目录下的文件以及文件夹简单介绍：

- public 最终所见网页的所有内容
- node_modules 插件以及hexo所需node.js模块
- _config.yml 站点配置文件，设定一些公开信息等
- package.json 应用程序信息，配置hexo运行所需js包
- scaffolds 模板文件夹，新建文章，会默认包含对应模板内容
- themes 存放主题文件，hexo根据主题生成静态网页（速度贼快）
- source 用于存放用户资源（除 posts 文件夹，其余命名方式为 “ + 文件名”的文件被忽略）

博客的文章编写操作都在source/_post 下。

在根目录下进行git命令输入

hexo s

会看到有个localhost的本地连接，复制链接到浏览器中打开，即可看到hexo内置的默认landscape主题博客内容。

在命令窗进行crtl+c可以停止本地网站预览

主题

这里我们介绍下主题和框架，我们现在使用的Hexo是一款快速、简单的博客框架，主题就是开发者根据此框架开发的功能更加完备、页面样式、栏目更多的一种”配件“。就像你用的手机，换上手机壳，选手机壳时需要匹配自己手机的型号，不然也不配套啊是吧

再举个“栗子”，像Android手机（IOS闭源，除非越狱），厂家生产时默认的桌面主题，在主题商店这个app里你能根据自己的喜好选择更好看的图标、背景、字体。就像是“换上新衣”，可以从这个角度理解我们下面要做的操作

点击查看更多hexo主题内容

Butterfly主题

安装主题

安装主题，在根目录git命令输入

git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

安装完成后，在根目录下hexo-kimbell-blog/themes/可以看到有个butterfly文件夹，这就是主题内容。

安装插件

npm install hexo-renderer-pug hexo-renderer-stylus --save

更换主题

在根目录下的_config.yaml（注意不是主题文件夹下的_config.yaml）修改 theme: butterfly(换了什么主题就写对应的主题名称) 这样修改好等于穿上衣服的动作

接下来在git命令窗口里输入命令进行本地预览

hexo clean //执行此命令后继续下一条
hexo g //生成博客目录
hexo s //本地预览

此时就可以看到网站已经穿上buttefly主题啦，需要美化之类的按照主题博主的教程来即可。

我的博客

到此你的本地网站其实已经搭建完成了。可以编写文章贴图片等通过上述的git命令进行本地预览网站的样子。

但是如果你想自己做的博客网站发布到网上，让人家也可以看到你的网站美貌，就还需要继续后面的内容。（后续已经发布的网站的编辑修改也是先在本地网站预览和调试好，再进行发布。）

网站发布上线

图床

网站发布的话，需要通过云端服务器进行运行你的网站内容才可以发布出去。等于云端服务器是你自己的电脑，跟在你的电脑进行本地网站预览一样。别人通过上网可以访问你的云端服务器发布的内容，就可以流程的浏览你的网站内容啦。

但是对于云端服务器也要进行选择，有很多小伙伴不想花钱就使用github或者gitee上的服务器进行搭建图床。

github是国外的，所以访问速度会很慢，甚至经常性访问不了，所以不是很推荐，除非你能接受这个访问情况。

gitee是国内的，但是呢，它会极有可能封杀你的代码导致不给使用（大部分使用过的人都有此评价，自行去问度娘）。而且它还不给搭建图床，所以也不咋推荐。托管代码可以的话就去github吧，gitee不是首推，懂的都懂。

一般图床都搭配picgo使用，比较方便上传和管理图片。

butterfly主题设置

点击查看主题配置内容

服务器选择和配置

免费的服务器

Github Pages搭建博客网站

新建仓库，按照要求填写即可

仓库设置必须public，否则无法发布网站。
名称格式必须是 用户名.github.io
然后系统自动会操作成pages

记录好仓库地址，本地文档文件需要根据这个进行上传到仓库

git使用进行仓库的拉取和上传操作是需要在本地和仓库中配置好SSH公钥才可以进行的。如果你第一次用git请点击进行配置公钥

在根目录下的_config.yml修改参数

在根目录进行git命令

hexo c && hexo g && hexo d && hexo s

执行完上述命令，既可以通过你的用户名.github.io域名进行访问自己的网站啦。恭喜你，到此已经成功发布上线自己的网站。

自己的域名

域名（英语：Domain Name），又称网域，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识（有时也指地理位置）
由于IP地址具有不方便记忆并且不能显示地址组织的名称和性质等缺点，人们设计出了域名，并通过网域名称系统（DNS，Domain Name System）来将域名和IP地址相互映射，使人更方便地访问互联网，而不用去记住能够被机器直接读取的IP地址数串

不过，你会发现你的域名非常长，而且不容易记住，让别人去记住你的域名去访问，的确不是很容易。因此我们可以去购买一个自己喜欢的域名，让别人更加容易记住或者有自己特殊意义的域名。

挑选并购买

域名购买的话，还是推荐去正规渠道操作即可，作者用的是阿里云购买的域名（因为后面的服务器也是这里购买的，方便一起管理。如果你去腾讯云，建议就全在腾讯云，便于后面的统一管理）

点击阿里云域名购买点击腾讯云域名购买

购买域名的时候，后缀不同价格会有所不同，请根据自己情况自由选择。

域名后缀，亦被称为顶级域名，是指代表一个域名类型的符号。不同后缀的域名有不同的含义。域名共分为两类：国别域名（ccTLD），例如中国的.cn、美国的.us、俄罗斯的.ru、以及国际通用域名（gTLD），例如.com、.xyz、.top、.wang、pub、.xin、.net等1000多种，所有域名后缀作用无差异，仅外观和本身含义不同，但只有少数例如举例中的域名后缀可以在国内支持网站的备案

DNS解析

当你购买好自己的域名后，就可以在网站上进行添加域名啦。因为我们前面已经有了用户名.github.io这样域名的网站，因为我们为了简单易记，要使用自己购买的域名进行解析用户名.github.io。如此就可以通过所购买域名和用户名.github.io两个网址均可访问博客网站。

打开前面创建的仓库，找到设置，进入Pages设置，添加域名。如果需要进行https开头，可以免费使用强制HTTPS。

HTTPS （全称：Hyper Text Transfer Protocol over SecureSocket Layer），是以安全为目标的 HTTP 通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性
HTTPS 在HTTP 的基础下加入SSL，HTTPS 的安全基础是 SSL【SSL(Secure Sockets Layer 安全套接字协议),及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS与SSL在传输层与应用层之间对网络连接进行加密】
因此加密的详细内容就需要 SSL。 HTTPS 存在不同于 HTTP 的默认端口及一个加密/身份验证层（在 HTTP与 TCP 之间）。这个系统提供了身份验证与加密通讯方法。它被广泛用于万维网上安全敏感的通讯，例如交易支付等方面。

花钱的服务器

前面介绍的是两个免费的服务器搭建博客（github、gitee）其中介绍了github搭建博客的详细过程。但是由于Github是国外的服务器，其访问速度会较慢，而且大部分情况会经常访问不了，进而影响个人博客的访问情况。因此在国内，可以选择国内服务器进行搭建博客网站，其访问速度会大大加快，而且稳定安全很多。

自行选择购买

点击阿里云服务器购买点击腾讯云服务器购买

因为作者用的是阿里云服务器，因此本文章介绍的是阿里云服务器部署博客网站。其他服务器大同小异，可以借鉴下，一般情况下都差不多的，可能就入口啊啥的些微区别。

域名解析

在阿里云官网进入域名控制台

找到自己购买的域名，如果有多个域名，就选择一个和与username.github.io绑定的域名，点击“解析”。

进入后，点击添加记录，需要添加两次记录

第一次

第二次

自此可以使用购买后的域名进行访问布置在Github上的网站了，但因为访问速度问题，前面已经提过。因此接下来就是在云服务器进行部署运行自己的博客网站。

部署

部署需要进行远程连接上自己云服务器（等于自己用键盘鼠标插上电脑才可以进行东西输入和操作），才可以进行设定。因此先进行密码设定（因为不是随便就给别人操作你的云服务器，需要加密进行）。

密码设定

在图示位置进行更改远程连接密码，保存好。

一般推荐本地Git进行远程连接。浏览器远程连接也可以，但是有一些快捷键会操作不出来。

远程连接

Linux服务器远程连接，我们选择使用第三方工具putty。具体参考阿里云帮助文档

启动Putty工具，链接服务器，登陆用户名为root，密码就是在服务器位置设置的密码（Linux操作系统中输入密码为了安全不显示，不必担心）出现以下界面时，说明配置正常，继续下一步即可

git配置

输入命令，安装Git

yum install git

中途如果暂停，则根据提示输入 yes / y / Y，表示继续安装，知道最后出现complete表示安装成功

创建Git账户

adduser git

添加git账户权限

chmod 740 /etc/sudoers
vim /etc/sudoers

输入完上面三条命令后，点击键盘 ‘ i ‘ 键进入编程模式，找打图示位置代码。

如图所示，在下面一行加入以下内容

git     ALL=(ALL)     ALL

按 ‘ Esc ‘键并输入:wq(意思就是保存后退出)

回收权限

chmod 400 /etc/sudoers

设置git账户密码

sudo passwd git

输入命令回车后连续输入两次密码即可（不显示，正常），出现图示即成功。密码要记住，比较重要。

切换至git账户

su git

创建 ~/.ssh 和 ~/.ssh/authorized_keys 文件

mkdir ~/.ssh
vim ~/.ssh/authorized_keys

点击键盘 i 键进入编辑模式，粘贴本地电脑生成的SSH公钥，文件位置如图

粘贴后，按 ‘ Esc ‘键并输入:wq(意思就是保存后退出)

赋予权限

chmod 600 /home/git/.ssh/authorized_keys
chmod 700 /home/git/.ssh

本地Git bash here中测试是否免密登陆成功

ssh -v git@服务器公网IP

出现图示内容表示连接成功

服务器中创建仓库并完成配置

切换到root账户

sudo su root

创建repo仓库目录

mkdir /www/repo

赋予权限

chown -R git:git /www/repo
chmod -R 755 /www/repo

建立网站根目录hexo

mkdir /www/hexo

赋予权限

chown -R git:git /www/hexo
chmod -R 755 /www/hexo

新建空白的git仓库并初始化

cd /www/repo
git init --bare hexo.git

创建 Git 钩子，用于自动部署

vim /www/repo/hexo.git/hooks/post-receive

同上，进入编辑模式，粘贴下面代码并保存退出

#!/bin/bash
git --work-tree=/www/hexo --git-dir=/www/repo/hexo.git checkout -f

修改权限

chown -R git:git /www/repo/hexo.git/hooks/post-receive
chmod +x /www/repo/hexo.git/hooks/post-receive

仓库建立完毕

安装Nginx

Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好
Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务，其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

中途输入 y，表示继续安装（和上面一样）等待安装完成，会显示登陆网址和初始密码.

注意红框位置，如果两个网址都无法访问，请在服务器安全组 / 防火墙中放行8888端口

输入初始账户名、密码登陆

进入后，搜索Nginx点击安装（我这里已经装过了）

网站–> 添加站点，域名形式xxx.com 无需任何前缀

设置–> 配置文件，修改红框内容

设置–> 网站目录，修改为 /www/hexo 并保存

服务器终端，重启服务

service bt restart

至此，服务器端配置完成

Hexo配置修改

进入本地博客根目录，修改 _config.yml 文件部署位置

GitHub Pages 设定

服务器设置

源码如下

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy: 
  type: git
  repo: git@你的域名:/www/repo/hexo.git
  branch: master # 注意此处分支设定,需在仓库中选择默认的分支

打开Putty工具，连接服务器赋予权限

chown -R git:git /www/repo/
chown -R git:git /www/hexo/

本地根目录下打开 git bash here执行命令

hexo clean //清除缓存
hexo d -g //快速部署

序言

本地网站

开发工具

VScode

框架

Hexo

本地环境

git使用

node.js

Hexo部署

安装

初始化

主题

Butterfly主题

安装主题

安装插件

更换主题

网站发布上线

图床

butterfly主题设置

服务器选择和配置

免费的服务器

自己的域名

挑选并购买

DNS解析

花钱的服务器

自行选择购买

域名解析

部署

密码设定

远程连接

git配置

输入命令， 安装Git

创建Git账户

添加git账户权限

回收权限

设置git账户密码

切换至git账户

创建 ~/.ssh 和 ~/.ssh/authorized_keys 文件

本地Git bash here中测试是否免密登陆成功

服务器中创建仓库并完成配置

创建 Git 钩子，用于自动部署

安装Nginx

Hexo配置修改

输入命令，安装Git