基于hexo+Github/Gitee创建个人网站

本文最后更新于：2 天前

创建博客前置需求

  • 已经安装了gitbash
  • 会使用gitbash
  • 已经配置好SSH
  • 已经安装Node.js
  • 会使用npm

如果不会的话可以点后面的链接去学习。

开始创建博客

1 创建博客

1.1安装hexo

全局安装hexo-cli

1
npm install hexo-cli -g

fsQ63Q.png

安装完成就能看到绿框里的东西了。
治愈那两个警告不用管它，因为fsevent是mac osx的，在Windows或者Linux下会有警告，忽略即可。

1.2创建好博客文件夹

1.创建
有两种方法：

  • 进入你要建博客的文件夹

    1.打开命令行工具

    ​ 可以使用gitbash,直接在文件夹里右键→git bash

    ​ 也可以使用cmd,在文件夹地址栏输入cmd回车

    2.创建并初始化一个存放博客代码的文件夹

    1
    hexo init 文件夹名字

    3.进入这个文件夹

    1
    cd 文件夹名字

  • 进入你要建博客的文件夹

    1.创建一个存放博客代码的文件夹，并进入文件夹

    2.打开命令行工具

    3.初始化

    1
    hexo init

2.安装依赖

进入你已经创建的存放博客代码的文件夹

然后，安装一些依赖：

1
npm install

2 新建文章

2.1 新建文章

现在先不用管博客美化的问题，现在的第一件事情是可以看到也就是在浏览器可以预览到自己的博客，并且能推送到GitHub/Gitee上并且能访问到。

1
hexo new "文章名"

fyAnAJ.png

创建完毕，成功之后会告诉你已经在_post文件夹下创建好了。打开看一下，里边的helloworld是默认就有的，你可以先不用管，不想看可以直接删了。

fyAQ91.png

打开你新建的文件给它写几句内容。你不想写可以先不写。

fyAUNd.png

tags：最好填写自己的标签分类

2.2 生成静态页面

刚才你所创建的文件以及写入的内容均在一个文本文档里面，这一步就是将你的文本文件解析为静态网页。

1
hexo generate# 生成静态网页

2.3 本地预览

如果你不想在本地看一下是什么效果，可以跳过这一步。

1
2
hexo clean# 清理一下
hexo server# 启动本地服务

fyEF5d.png

注意不要关闭命令工具，不要按Ctrl + C，在浏览器输入提示你的地址你就可以看到页面了，看完之后不需要了，你可以回到命令工具，按Ctrl + C停止后台服务。

3 部署到GitHub/Gitee

3.1 下载hexo-deployer-git

使用github的也知道，本地上传文件给远程仓库是需要添加remote，然后自己add commit push等等。但是使用hexo就不用管这些了。hexo可以帮你完成这些繁琐的工作。
首先你要下载一个帮你完成工作的工具：

1
npm install hexo-deployer-git --save

3.2 Github仓库

确定你的github已经配置好SSH秘钥了。
在github新建一个仓库，取名用户名.github.io，其实你可以不叫这个，随便取一个的。
区别在于，如果你使用用户名.github.io，那你的页面访问的时候就是https://用户名.github.io，你要是随便取一个，那就是https://用户名.github.io/仓库名/。
建好仓库之后进去，复制SSH链接，记住是SSH链接不是https链接，否则部署时候会失败。

fyE5id.png

3.3 Gitee仓库

确定你的gitee已经配置好SSH秘钥了。
在gitee新建一个仓库，取名用户名.gitee.io，其实你可以不叫这个，随便取一个的。
区别在于，如果你使用用户名.gitee.io，那你的页面访问的时候就是https://用户名.gitee.io，你要是随便取一个，那就是https://用户名.gitee.io/仓库名/。
建好仓库之后进去，复制SSH链接，记住是SSH链接不是https链接，否则部署时候会失败。

fyVUSI.png

3.4 修改_config.yml

回到你的博客文件夹，找到_config.yml文件，对其进行修改。用记事本打开，拉到最底下

1
2
3
4
5
6
7
8
9
10
# 只推送到github
deploy:
  type: git
  repo: 你刚才复制的
  branch: main #因为黑人运动主分支已经不叫master
# 只推动到gitee
deploy:
  type: git
  repo: 你刚才复制的
  branch: master

如果你只推送道github，你就按我给的代码写。如果你想同时部署到多个仓库，那你就按我下面里的写冒号是英文的，冒号后边有一个空格。注意格式否则会部署失败。

1
2
3
4
5
6
deploy:
  type: git
  repo: 
  	github: 你刚才复制的ssh地址
  	gitee: git@gitee.com:gao_tengfei/gao_tengfei.gitee.io.git
  branch: master

3.5 部署

1
2
3
hexo clean
hexo generate
hexo deploy

如果你部署失败了……那应该是你的node版本太新了……卸载从头再来。
部署完成之后你的github/gtiee仓库里就有东西啦。

3.6 Github设置

fyeGRA.png

如果，你只向github推送，那么左上角分支那选择main就可以，如果你既向github又向gitee推送，这个时候你的分支要选择master才会有内容，然后点击右上角Settings，进入设置

fyesRs.png

然后选择左下角Pages

fyeWZT.png

然后中间Your site is published at xxxxx，那个链接就是你的博客链接啦。

下面Source处，如果只想github推送，选择main分支即可，否则选择master分支。

3.7 Gitee设置

fymYY4.png

选择服务

fymfXt.png

选择Gitee Pages，进去之后，现在是需要实名认证，然后就可以开通

4 更换主题以及美化

下一篇文章在介绍

博客类技术文章

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！