Hexo零基础搭建个人博客(详解)

✅作者简介：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已经被忽略掉了，没有关系，不需要上传的，因为在别的电脑上需要重新输入命令安装。

这样就上传完了。

标签： git github

本文转载自: https://blog.csdn.net/qq_53517370/article/details/128908434
版权归原作者 就你叫Martin？ 所有，如有侵权，请联系我们删除。