GitHub+Hexo搭建个人博客

开源 0
前言:小白都能会的个人博客搭建方法。包括小白花了好多时间搜罗的一大堆杂七杂八的资料汇总,遇到的一系列麻烦问题与解决方法。希望能对另一个小白有帮助。(大佬也可以来欣赏一下小白的崩溃心路历程)

当然,小白现在也不懂太多原理,但是小白会去学习。

一、必要工具

1. 安装并配置Node.js(最好以管理员身份运行)

视频教程: 【Node.js安装及环境变量配置】 Node.js安装及环境变量配置_哔哩哔哩_bilibili

(评论区下方基本能找到各种报错的解决办法)

2. 安装并配置git

视频教程: 【【2022最新Git教程】02 Git安装配置 | 一套带走 快速上手 保姆级 | 持续更新】 【2022最新Git教程】02 Git安装配置 | 一套带走 快速上手 保姆级 | 持续更新_哔哩哔哩_bilibili

3. 安装Hexo
 npm install -g hexo-cli

二、本地生成博客

1. 在本地创建一个名为Blog的文件夹,并右键Git Bash Here

2. 初始化Hexo

 hexo init

成功标识:INFO Start blogging with Hexo !

3. 生成本地的Hexo页面并访问

 hexo s

本地地址:http://localhost:4000/ 按Ctrl+c关闭服务器

三、上传到Github

1. 新建一个GitHub仓库

名字为你的用户名.github.io(最好不要初始生成README文件) 举例:Antarctica000.github.io

2. 修改Blog中的配置文件

打开Blog根目录下的_config.yml文件(可以用VScode) 划拉到文件底部最后四行,改成这样:

 deploy:   type: git   repository: https://github.com/Antarctica000/Antarctica000.github.io.git(你的仓库地址)   branch: master (你的默认分支)

一定要注意冒号后面空格!!!小白因此花费了一个世纪的时间找错误QAQ

3. 安装hexo-deployer-git自动部署发布工具

 npm install hexo-deployer-git --save

4. 生成静态文件

 hexo g

5. 部署到远程服务器

 hexo d

这里如果出现网络报错,多试几遍即可。(小白在这里卡了三个世纪,直到换了一个WiFi)如果还是不行,可以尝试关闭360或者使用科学上网工具。

6. 其他

在看似简单的过程中,有可能会遇到各种千奇百怪的问题,请耐心地调试,相信你花费的时间一定没有小白久QAQ

四、撰写博客

1. 了解文件

打开Blog根目录:

  • _config.yml : 站点配置文件,之后会经常打交道的文件。与博客的格式、内容相关的设置都在这个文件里修改。

  • node_modules : 存储Hexo插件的文件,可以实现各种扩展功能。

  • scaffolds :模板文件夹,里面的 post.md 文件可以设置每一篇博客的模板。

  • source :所有的个人文件例如文章都在里面。很重要。

  • themes :主题文件夹,可以下载各种各样美观的主题。

2. 下载主题并配置

懒一点的话,可以从Hexo官网或GitHub里挑选自己喜欢的主题下载。 在Blog根目录下执行:

 git clone (主题的网址)

然后打开Blog根目录里的_config.yml文件,搜索theme关键词,把默认值改为你下载的主题名字。

再进入themes文件夹,找到_config.yml文件(不同于Blog根目录下的站点配置文件),然后根据你下载主题的官方文档,修改里面的配置,使它成为你的博客!

如果不怕麻烦想要更精美,可以下载Butterfly主题自行DIY。推荐一篇博客: 海拥Butterfly主题美化:Butterfly 主题美化(一) | 海拥

3. 发布文章

打开source文件夹,进入并新建.md文件进行编辑即可。 记得每次修改完成后最好执行这四个命令:

hexo clhexo ghexo s(每次写完文章后可以先直接输入此命令,在本地预览效果,满意之后再往下执行)hexo d

4. 其他

如果想要绑定自己的域名,请自行搜索相关教程。谨慎绑定!

更多有趣的内容请见我的博客!

Antarctica (antarctica000.github.io)

也许您对下面的内容还感兴趣: