✅作者简介：CSDN内容合伙人、信息安全专业在校大学生🏆
🔥系列专栏 ：零基础搭建个人网站
📃新人博主 ：欢迎点赞收藏关注，会回访！
💬个人格言：舞台再大，你不上台，永远是个观众。平台再好，你不参与，永远是局外人。能力再大，你不行动，只能看别人成功！没有人会关心你付出过多少努力，撑得累不累，摔得痛不痛，他们只会看你最后站在什么位置，然后羡慕或鄙夷。
Hexo + Github零基础搭建基础的，免费的个人网站
文章目录
第一部分：安装教程
1. 安装Git
安装过程跳过，测试是否安装成功
git -v
2. 安装Node.js
安装过程跳过，测试是否安装成功
node -v
3. 安装hexo
- 在安装目录下输入命令
npminstall-g hexo-cli
#安装成功输出：
added 59 packages, and audited 60 packages in 10s
15 packages are looking for funding
run `npm fund`for details
found 0 vulnerabilities
- 测试是否安装成功
hexo -v - 初始化hexo
hexo init myblog # myblog是您想设置的文件名
成功之后输出：
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO Install dependencies
INFO Start blogging with Hexo!
- 进入该文件夹，
cd myblog然后执行命令npm install自动安装依赖。
cd myblog
npminstall
up to date, audited 240 packages in 2s
22 packages are looking for funding
run `npm fund`for details
found 0 vulnerabilities
安装结果如下：
- node_modules: 依赖包
- public：存放生成的页面
- scaffolds：生成文章的一些模板
- source：用来存放你的文章
- themes：主题
- _config.yml: 博客的配置文件
- 启动hexo服务
hexo g
hexo server //hexo s
打开hexo的服务，在浏览器输入localhost:4000就可以看到你生成的博客了。如下图，使用Ctrl + C 就可以关闭
4. GitHub创建个人仓库
首先，你先要有一个GitHub账户，去注册一个吧。
注册完登录后，在GitHub.com中看到一个New repository，新建仓库
创建一个和你用户名相同的仓库，后面加.github.io，只有这样，将来要部署到GitHub page的时候，才会被识别，也就是xxxx.github.io，其中xxx就是你注册GitHub的用户名。我这里是已经建过了。
然后点击
create repository
。
5. 生成SSH添加到GitHub
打开刚才的myblog的文件目录，在空白地方鼠标右键，点击
Git Bash Here
设置 Git 的用户名和邮箱
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub邮箱"
这里的yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。
可以用以下两条，检查一下你有没有输对
git config user.name
git config user.email
然后创建SSH,一路回车
ssh-keygen -t rsa -C "youremail"
这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹。
ssh，简单来讲，就是一个秘钥，其中，
id_rsa
是你这台电脑的私人秘钥，不能给别人看的，
id_rsa.pub
是公共秘钥，可以随便给别人看。把这个公钥放在GitHub上，这样当你链接GitHub自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到GitHub上。
而后在GitHub的setting中，找到
SSH keys
的设置选项，点击
New SSH key
把你的
id_rsa.pub
里面的信息复制进去,名字随便起。
之后Git命令行输入
ssh -T [email protected]
测试是否成功
6. 将hexo部署到GitHub
这一步，我们就可以将hexo和GitHub关联起来，也就是将hexo生成的文章部署到GitHub上，打开站点配置文件
_config.yml
翻到最后，修改下面代码的
YourgithubName
为你的GitHub账户的用户名.注意修改文件配置的时候，因为是YAML风格，所以冒号后面有一个空格！
deploy:
type: git
repo: https://github.com/YourgithubName/YourgithubName.github.io.git
branch: main
这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。
npm install hexo-deployer-git --save
成功之后输出：
added 1 package, and audited 241 packages in 3s
22 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
然后
hexo clean
hexo generate # hexo g
hexo deploy # hexo d
其中
hexo clean
清除了你之前生成的东西，也可以不加。
hexo generate
顾名思义，生成静态文章，可以用
hexo g
缩写
hexo deploy 部署文章，可以用
hexo d
缩写
注意deploy时可能要你输入
username
和
password
。
得到下图就说明部署成功了，过一会儿就可以在
http://yourname.github.io
这个网站看到你的博客了！！
接下来你就可以正式开始写文章了。
hexo new newpapername
然后在source/_post中打开markdown文件，就可以开始编辑了。当你写完的时候，再
hexo clean
hexo g
hexo d
就可以看到更新了。
第二部分： hexo的基本配置
1. hexo基本配置
在文件根目录下的
_config.yml
，就是整个hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。
网站
参数描述
title
网站标题
subtitle
网站副标题
description
网站描述
author
您的名字
language
网站使用的语言
timezone
网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。
其中，
description
主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。
author
参数用于主题显示文章的作者。
网址
参数描述
url
网址
root
网站根目录
permalink
文章的 永久链接格式
permalink_defaults
永久链接中各部分的默认值
在这里，你需要把
url
改成你的网站域名。
permalink
，也就是你生成某个文章时的那个链接格式。
比如我新建一个文章叫
temp.md
，那么这个时候他自动生成的地址就是
http://yoursite.com/2018/09/05/temp
。
以下是官方给出的示例，关于链接的变量还有很多，需要的可以去官网上查找 永久链接 。
参数结果
:year/:month/:day/:title/
2013/07/14/hello-world
:year-:month-:day-:title.html
2013-07-14-hello-world.html
:category/:title
foo/bar/hello-world
再往下翻，中间这些都默认就好了。
theme: landscape
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: <repository url>
branch: [branch]
theme
就是选择什么主题，也就是在
theme
这个文件夹下，在官网上有很多个主题，默认给你安装的是
lanscape
这个主题。当你需要更换主题时，在官网上下载，把主题的文件放在
theme
文件夹下，再修改这个参数就可以了。
接下来这个
deploy
就是网站的部署的，
repo
就是仓库(
Repository
)的简写。branch选择仓库的哪个分支。这个在之前进行
github page
部署的时候已经修改过了，不再赘述。而这个在后面进行双平台部署的时候会再次用到。
Front-matter
Front-matter 是文件最上方以 — 分隔的区域，用于指定个别文件的变量，举例来说：
title: Hello World
date: 2013/7/13 20:46:25
---
下是预先定义的参数，您可在模板中使用这些参数值并加以利用。
参数描述
layout
布局
title
标题
date
建立日期
updated
更新日期
comments
开启文章的评论功能
tags
标签（不适用于分页）
categories
分类（不适用于分页）
permalink
覆盖文章网址
其中，分类和标签需要区别一下，分类具有顺序性和层次性，也就是说
Foo, Bar
不等于
Bar, Foo
；而标签没有顺序和层次。
categories:
- Diary
tags:
- PS3
- Games
layout（布局）
当你每一次使用代码
hexo new paper
它其实默认使用的是
post
这个布局，也就是在
source
文件夹下的
_post
里面。
Hexo 有三种默认布局：
post
、
page
和
draft
，它们分别对应不同的路径，而您自定义的其他布局和
post
相同，都将储存到
source/_posts
文件夹。
布局路径
post
source/_posts
page
source
draft
source/_drafts
而new这个命令其实是：
hexo new [layout] <title>
只不过这个layout默认是post罢了。
page
如果你想另起一页，那么可以使用
hexo new page board
系统会自动给你在source文件夹下创建一个board文件夹，以及board文件夹中的index.md，这样你访问的board对应的链接就是http://xxx.xxx/board
draft
draft是草稿的意思，也就是你如果想写文章，又不希望被看到，那么可以
hexo new draft newpage
这样会在source/_draft中新建一个newpage.md文件，如果你的草稿文件写的过程中，想要预览一下，那么可以使用
hexo server --draft
在本地端口中开启服务预览。
如果你的草稿文件写完了，想要发表到post中，
hexo publish draft newpage
就会自动把newpage.md发送到post中。
2. 更换主题
到这一步，如果你觉得默认的landscape主题不好看，那么可以在官网的主题中，选择你喜欢的一个主题进行修改就可以啦。点这里
直接在github链接上下载下来，然后放到theme文件夹下就行了，然后再在刚才说的配置文件中把theme换成那个主题文件夹的名字，它就会自动在theme文件夹中搜索你配置的主题。
而后进入你下载的主题的这个文件夹，可以看到里面也有一个配置文件
_config.xml
，貌似它默认是
_config.xml.example
，把它复制一份，重命名为
_config.xml
就可以了。这个配置文件是修改你整个主题的配置文件。
示例 next主题的安装
在博客根目录下：
git clone https://github.com/theme-next/hexo-theme-next themes/next
然后查看是否下载完成
打开根目录下的
_config.yml
修改主题为
next
然后打开
/theme/next/_config.yml
进行主题的配置，注意修改文件配置的时候，因为是YAML风格，所以冒号后面有一个空格！
完成之后，在根目录用命令
hexo clean
清除缓冲，
hexo g
生成静态文件，
hexo s
本地浏览器查看效果，
hexo d
部署到服务器
修改语言
在主题对应的
languages
目录下找到中文的编码
zh-CN
，然后在
/theme/next/_config.yml
下设置
language: zh-CN
menu（菜单栏）
也就是上面菜单栏上的这些东西。
在配置文件中，想展示哪个就展示哪个。
问题1：点击about出现如下图
hexo new page about
它就会在根目录下source文件夹中新建了一个about文件夹，以及index.md，在index.md中写上你想要写的东西，就可以在网站上展示出来了。
如果你想要自己再自定义一个菜单栏的选项，那么就
hexo new page yourdiy
然后在主题配置文件的menu菜单栏添加一个
Yourdiy : /yourdiy
，注意冒号后面要有空格，以及前面的空格要和menu中默认的保持整齐。然后在
languages
文件夹中，找到
zh-CN.yml
，在
index
中添加
yourdiy
: '对应的中文意思’就可以显示中文了。
customize(定制)
在这里可以修改你的个人logo，默认是那个hueman，在source/css/images文件夹中放入自己要的logo，再改一下url的链接名字就可以了。
favicon是网站中出现的那个小图标的icon，找一张你喜欢的logo，然后转换成ico格式，放在images文件夹下，配置一下路径就行。
social_links ，可以显示你的社交链接，而且是有logo的。
tips:
在这里可以添加一个rss功能，也就是那个符号像wifi一样的东西。
widgets(侧边栏)
侧边栏的小标签，如果你想自己增加一个，比如我增加了一个联系方式，那么我把communication写在上面，在zh-CN.yml中的sidebar，添加communication: ‘中文’。
然后在hueman/layout/widget中添加一个communicaiton.ejs，填入模板：
<% if (site.posts.length) { %>
<divclass="widget-wrap widget-list"><h3class="widget-title"><%= __('sidebar.communiation') %></h3><divclass="widget"><!--这里添加你要写的内容--></div></div>
<% } %>
search(搜索框)
默认搜索框是不能够用的，
you need to install hexo-generator-json-content before using Insight Search
它已经告诉你了，如果想要使用，就安装这个插件。
comment(评论系统)
这里的多数都是国外的，基本用不了。这个valine好像不错，还能统计文章阅读量，可以自己试一试，
miscellaneous(其他)
这里我就改了一个links，可以添加友链。注意空格要对！不然会报错！
总结：
整个主题看起来好像很复杂的样子，但是仔细捋一捋其实也比较流畅，
- languages: 顾名思义
- layout：布局文件，其实后期想要修改自定义网站上的东西，添加各种各样的信息，主要是在这里修改，其中comment是评论系统，common是常规的布局，最常修改的在这里面，比如修改页面head和footer的内容。
- scripts：js脚本，暂时没什么用
- source：里面放了一些css的样式，以及图片
3. git分支进行多终端工作
问题来了，如果你现在在自己的笔记本上写的博客，部署在了网站上，那么你在家里用台式机，或者实验室的台式机，发现你电脑里面没有博客的文件，或者要换电脑了，最后不知道怎么移动文件，怎么办？
在这里我们就可以利用git的分支系统进行多终端工作了，这样每次打开不一样的电脑，只需要进行简单的配置和在github上把文件同步下来，就可以无缝操作了。
机制
机制是这样的，由于hexo d上传部署到github的其实是hexo编译后的文件，是用来生成网页的，不包含源文件。
也就是上传的是在本地目录里自动生成的.deploy_git里面。
其他文件 ，包括我们写在source 里面的，和配置文件，主题文件，都没有上传到github
所以可以利用git的分支管理，将源文件上传到github的另一个分支即可。
上传分支
首先，先在github上新建一个hexo分支，如图：
然后在这个仓库的settings中，选择默认分支为hexo分支（这样每次同步的时候就不用指定分支，比较方便）。
然后在本地的任意目录下，打开git bash，
git clone git@你的网址
将其克隆到本地，因为默认分支已经设成了hexo，所以clone时只clone了hexo。
接下来在克隆到本地的文件中，把除了.git 文件夹外的所有文件都删掉
把之前我们写的博客源文件全部复制过来，除了.deploy_git。这里应该说一句，复制过来的源文件应该有一个.gitignore，用来忽略一些不需要的文件，如果没有的话，自己新建一个，在里面写上如下，表示这些类型文件不需要git：
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
注意，如果你之前克隆过theme中的主题文件，那么应该把主题文件中的.git文件夹删掉，因为git不能嵌套上传，最好是显示隐藏文件，检查一下有没有，否则上传的时候会出错，导致你的主题文件无法上传，这样你的配置在别的电脑上就用不了了。
而后
git add .
git commit –m "add branch"
git push
这样就上传完了，可以去你的github上看一看hexo分支有没有上传上去，其中node_modules、public、db.json已经被忽略掉了，没有关系，不需要上传的，因为在别的电脑上需要重新输入命令安装 。
这样就上传完了。
版权归原作者 就你叫Martin？ 所有， 如有侵权，请联系我们删除。