步骤

Github创建个人仓库

先建立一个单独的仓库

命名为 “yourname.github.io”

个人网站域名/github域名

买，阿里云or腾讯

国内使用的话买.cn即可

.com是国内外均可

安装Git

安装完配置连接github(ssh配置)，详情见(Git and SSH | Elapsedf)

以及设置config（重要）

1
2
3

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"
eg: git config --global user.name "DFsui"

若连不上，可以先试着能不能用git连上github

ssh git@github.com

git报错kex_exchange_identification：断开VPN尝试

git config --global -l查看配置是否正确

安装Node.js

默认安装即可

安装Hxeo

新建一个文件夹“BLOG”，在文件夹内用命令行打开（也可以用命令行cd到对应目录）

使用npm命令安装Hexo，输入：

1	npm install -g hexo-cli

安装完成后，初始化我们的博客，输入：

1	hexo init blog

注意，这里的命令都是作用在刚刚创建的Blog文件夹中。

为了检测我们的网站雏形，分别按顺序输入以下三条命令：(可以在git或cmd中运行，建议git)

hexo new test_my_site

hexo g

hexo s

这些命令在后面作介绍，完成后，打开浏览器输入地址：

localhost:4000

可以看出我们写出第一篇博客，见下图

Hexo命令

npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客

命令简写
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令

刚刚的三个命令依次是新建一篇博客文章、生成网页、在本地预览的操作。

推送网站

BLOG文件夹内有blog文件夹，在blog根目录里的_config.yml文件称为站点配置文件，如下图

进入根目录里的themes文件夹，里面也有个_config.yml文件，这个称为主题配置文件，如下图

下一步将我们的Hexo与GitHub关联起来，打开站点的配置文件_config.yml，翻到最后修改为：

deploy:
  type: git
  repo: git@github.com:DFsui/DFsui.github.io.git
  branch: master
  user:
    name = DFsui
    email = KaFujiang@outlook.com

保存站点部署文件后，安装Git部署插件，输入命令：

1	npm install hexo-deployer-git --save

这时，我们分别输入三条命令：

1
2
3

hexo clean 
hexo g 
hexo d

你就会发现你的博客已经上线了，可以在网络上被访问了。

若hexo d报错，多看报错信息

设置主题

如果你不喜欢Hexo默认的主题，可以更换不同的主题，主题传送门：Themes

用的Butterfly

这是将Next主题下载到blog目录的themes主题下的next文件夹中。打开站点的_config.yml配置文件，修改主题为Butter

主题设置

基本设置

主页图片，主页标题

联系方式

导航栏

版权协议

修改侧栏信息：在aside里

文字滚动

评论设置

Gitalk

已成功，注意格式即可

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  use: 
    - Gitalk	#这里记得设置对应的评论区
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true
  count: true # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page

# https://github.com/gitalk/gitalk
gitalk:
  enable: true
  client_id: 8816059000c4c8c811ca
  client_secret: 5f814dd3feb72762925b6fcc7a24a11063326267
  repo: Blog-Comments
  owner: Elapsedf
  admin: Elapsedf
  option:

结构

.deploy_git：部署到Gitee的文件夹，存放生成的静态页面
node_modules: 依赖包
public：部署到本地的文件夹，存放生成的静态页面
scaffolds：生成文章的md模板
source：存放文章md文件、图片、样式文件等一些资源
themes：主题，Hexo 会根据主题来生成静态页面
_config.landscape.yml：主题配置文件，用来修改主题，landscape是Hexo主题其中之一
_config.yml：网站配置文件

音乐设置

搜索栏设置

部署到云服务器上

(101条消息) 带你跳过各种坑，一次性把 Hexo 博客部署到自己的服务器_lawler61的博客-CSDN博客

阿里云服务器

服务器实例

用户名：root

密码：Elapsedf002016

用户名：Elapsedf

密码：Elapsedf

Xshell只是远程连接

购买域名

绑定域名：域名解析

云解析DNS就是指把网站域名或应用资源转换为数字 IP地址，从而将最终用户的访问路由到相应的网站或应用资源上。

主机记录：对应的前缀或者解析方式

尝试ping域名，通了的话则没问题

购买云服务器

登录问题

(101条消息) Xshell 连接阿里云centos服务器_阿里云 cntos xshell_feng_zhiyu的博客-CSDN博客

腾讯云ssh连接密码：002016

主机密码：Elapsedf@002016

配置ssh

将本机生成的ssh公钥放到服务器上即可

（后续再修改对应的名字，也可以不修改）

配置git

yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-devel 是用于在基于 RPM 包管理系统的 Linux 发行版上安装特定的开发库和依赖项。这些库通常用于编译和构建软件。

具体解释如下：

yum: 是一个包管理器，用于在 CentOS、Red Hat 等基于 RPM 的 Linux 发行版上安装、更新和删除软件包。
install: yum 命令的一个选项，指示安装软件包。
curl-devel: 是 cURL 库的开发包，包含用于编译和开发的头文件和库文件。
expat-devel: 是 Expat XML 解析器的开发包，包含用于编译和开发的头文件和库文件。
gettext-devel: 是 gettext 多语言库的开发包，包含用于编译和开发的头文件和库文件。
openssl-devel: 是 OpenSSL 加密库的开发包，包含用于编译和开发的头文件和库文件。
zlib-devel: 是 zlib 压缩库的开发包，包含用于编译和开发的头文件和库文件。
perl-devel: 是 Perl 解释器的开发包，包含用于编译和开发的头文件和库文件。

请注意，上述命令是针对基于 RPM 的 Linux 发行版，如 CentOS 和 Red Hat。如果您使用的是其他发行版，如 Ubuntu 或 Debian，则需要使用不同的包管理器（如 apt-get）和软件包名称进行安装。

git --work-tree=/home/git/projects/blog --git-dir=/home/git/repos/blog.git checkout -f 是一个 Git 命令，用于将 Git 仓库的内容强制（force）检出到指定的工作目录。

解释如下：

git: 是 Git 命令行工具的调用。
--work-tree=/home/git/projects/blog: 指定要将文件检出到的工作目录的路径，此处为 /home/git/projects/blog。工作目录是指您想要将 Git 仓库内容提取到的实际目录。
--git-dir=/home/git/repos/blog.git: 指定 Git 仓库的路径，此处为 /home/git/repos/blog.git。Git 仓库是包含项目历史和元数据的目录。
checkout: 是 Git 命令，用于将指定的分支或提交检出到工作目录。
-f: 是 checkout 命令的选项，表示进行强制检出，即覆盖工作目录中的文件。

通过执行该命令，将 Git 仓库 /home/git/repos/blog.git 中的内容强制检出到工作目录 /home/git/projects/blog。这可以用于更新或恢复工作目录中的文件，使其与 Git 仓库的最新状态保持一致。

请注意，您需要将命令中的路径替换为实际的 Git 仓库路径和工作目录路径，并确保您对这些路径具有适当的访问权限。

配置nginx

你有可能访问不了，请按照以下步骤进行排查

【Nginx】启动成功无法访问网页（完整的排除方案）_nginx启动成功但是无法访问-CSDN博客

在换了阿里云的服务器后，我无法正常访问的原因是没有添加安全组规则！

配置HTTPS

首先购买SSL证书，一般申请免费的即可！

然后将其安装到服务器上即可，详细教程如下，主要有两种

自动部署
手动安装

由于我的系统味centos，所以只能选择手动部署

SSL 证书如何选择 SSL 证书安装部署类型？-证书安装-文档中心-腾讯云 (tencent.com)

SSL 证书 Nginx 服务器 SSL 证书安装部署（Linux）-证书安装-文档中心-腾讯云 (tencent.com)

自动化助手上传文件到云服务器-操作指南-文档中心-腾讯云 (tencent.com)

发布

配置_config.yml文件

编辑本地deploy

在 package.json 中添加 npm 脚本

"scripts": {
  "deploy": "hexo clean && hexo g -d",
  "start": "hexo clean && hexo g && hexo s"
},

链接，在本地调试就用npm start，调试好了就上传到服务器
1
npm run deploy

CDN加速

CDN

全称:Content Delivery Network或Content Ddistribute Network，即内容分发网络

基本思路：

尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上

目的：

解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度和成功率。

控制时延无疑是现代信息科技的重要指标，CDN的意图就是尽可能的减少资源在转发、传输、链路抖动等情况下顺利保障信息的连贯性。

Blog置顶

利用Top值进行排序

1.打开博客目录，打开博客目录下的“node_modules\hexo-generator-index\lib”目录，其中的“generator.js”文件就是我们所要修改的文件。

实现该功能需要在const posts = locals.posts.sort(config.index_generator.order_by);
代码下添加一下内容：

posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) { // 两篇文章都有top，top大的在前
        if(a.top == b.top)
			return b.date - a.date; // 若top值一样，最新的文章在前面
        else
			return b.top - a.top; // top大的在前面
    }
    else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面
        return -1;
    }
    else if(!a.top && b.top) {
        return 1;
    }
    else return b.date - a.date; 	//都没有top标签，最新的文章在前面
});