使用hexo和github搭建个人博客网站详细流程

最新推荐文章于 2024-04-30 14:23:28 发布

测开小趴菜

最新推荐文章于 2024-04-30 14:23:28 发布

阅读量1.4k

点赞数 2

文章标签： github git hexo

本文链接：https://blog.csdn.net/m0_50086696/article/details/122802356

版权

机缘巧合了解到了个人博客这个东西，之前试过一次，但是因为某些原因，让我放弃了，感觉太难了，但是这次下定决心，花了很长的时间终于是搞定了，虽然找到了很详细的教程，但是也遇到了很多的问题，主要还是要细心，同时出现了问题其实都可以搜索到解决方法，下边将自己的搭建过程做一个记录。
先附上大佬教程：https://huahuipj.github.io/2021/08/20/shi-yong-github-bu-shu-yi-ge-jian-dan-de-bo-ke/

一、搭建github仓库

1.注册账号

大家介绍搭建的博客是部署在Github上的，所以肯定是要有一个Github账号的，没有的小伙伴去注册一个吧，操作比较简单这里就不在多讲了。

2.创建仓库

进入github中后点击右上角“+”号，点击“New repository” ：
新建github仓库

命名一定要和用户名一致，类似：super0514.github.io

3.出现问题

其一、登陆github网速问题：
因为github毕竟是国外的网站，所以我们访问的时候会很慢，并且很难进去，这里推荐给大家一个大佬gitee的加速器：https://gitee.com/docmirror/dev-sidecar?_from=gitee_search

需要注意的是未关闭下不要重启电脑，不然会导致无法上网，可以设置自启动

其二、创建github令牌：
因为我们在使用git提交信息时，现在不在使用密码，而是使用令牌token了，所以我们需要创建一个新的令牌，这里我就偷个懒，毕竟这里没出啥问题，把大佬的链接奉上：如何创建个人访问令牌

需要注意的是创建好后需要保存好令牌，第二次打开后是看不到令牌了的

二、将博客部署至github中

1.下载相关“配件”

安装git 这个是身为一个程序员必备的啦，相信大家都已经安装了，没有安装的话可以去网上搜索下安装流程，也比较简单。

安装node.js 和 hexo

这个也很简单，网上都能搜索到：
大佬们也都整理好了嘿嘿 node.js具体安装步骤
安装完node.js后就要安装hexo啦

首先在磁盘建立一个文件夹 Blog，点开Blog文件夹，鼠标右键打开 Git Bush Here，输入npm命令安装Hexo

安装完成后，输入 hexo init命令初始化博客：
初始化hexo
然后输入 hexo g 静态部署：
部署hexo
这时网页已经部署完成，输入 hexo s 命令可以查看：

浏览器输入 http://localhost:4000 就可以打开新部署的网页：
因为自己已经部署完成了，所以借助了一下其他地方的图片展示

使用Ctrl+c 可以停止运行服务器

这样我们的基本“配件”都搞定了，接下来我们将hexo博客部署至github上

2.将hexo部署到github上

现在回到我们的 Blog 文件夹，用笔记本打开 _config.yml 文件，如下图：

打开后，下滑至文件底部，填上以下内容：

deploy:
  type: git
  repository: https://github.com/super0514/super0514.github.io.git  #你的仓库地址
  branch: main

branch 填你刚刚创建GitHub仓库的默认分支名称，看下是master还是main，不要填错了，还要注意一下，冒号后面加一个空格

只要是配置文件中更改内容或者填写内容，冒号后边都需要加一个空格

然后回到 Blog 文件夹中，打开Git Bash，安装Git部署插件，输入命令：
npm install hexo-deployer-git --save

然后分别输入三条命令（“三部曲”）：

hexo clean   #清除缓存文件 db.json 和已生成的静态文件 public
hexo g       #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
hexo d       #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)

完成以后，打开浏览器，输入 https://xxx.github.io就可以打开你的网页了, 比如我的博客地址为https://super0514.github.io，如果你的博客没有显示或刷新可以等一小会儿再刷新一下，它可能会有延迟的问题。到这一步为止，你已经成功部署了属于你自己的一个简单博客了，不过样式看起来不怎么好看，接下来我们使用主题hexo-theme-matery来美化一下我们的博客。

3.出现问题

其一、hexo g 命令问题：
我们在使用hexo g 命令生成网站静态文件时，可能会出现文件不能被创建的问题，导致失败，这里我们需要注意两个点，一个是插件是否没问题输入：npm ls --depth 0
可以查看查看，如果没有则不是这个问题，还有一个就是我们使用的主题文件名要和写入配置文件中的一致，否则也会出错。
配置文件信息
其二、hexo d命令问题：
我们使用hexo d命令是将文件部署至仓库中，但是由于网络的问题时常会出现下图情况，没关系，ctrl+c 退出，重新执行一次命令试试
hexo d部署问题

同时部署时也需要登陆github，这里就上最开始说的，部署时，需要使用令牌，不是github的密码哦

三、使用matery主题美化博客

最开始的时候并不知道，原来有好多主题，当然matery也是很不错的一种，这里我们就跟着大佬的教程，使用matery主题来进行美化博客吧

别的不说，先把大佬教程奉上，很全面：matery主题详细配置
虽然我通过这个教程完成了，但是刚开始好多没看明白，后边终于搞懂了，害
接下来在奉上自己的配置流程
下载主题
刚开始自己在这就吃亏了，这个主题是放在blog文件夹里的themes文件夹，不是再里边的hexo里的themes文件夹，这里提个醒

教程里所指的hexo根目录都是我们创建的blog目录下

然后在跟着教程创建tags等页面：
matery主题配置
当然类似一些聊天、评论的配置就没有进行详细的配置了，下一篇在进行深入美化哦，这里只做基础配置

基础配置都没什么大问题，只要注意文件的位置和配置信息不出错

额外补充

补充一下如何发布文章，我自己在用的就是csdn，里边有这个Markdown编辑器，写完文章后可以导出，然后保存在blog文件夹source文件夹中的_posts文件夹中，然后在用记事本打开文件
在这里插入图片描述
title ：标题
categories ：分类
tags ：标签
将文件进行修改后在使用hexo“三部曲”中的hexo g 生成文件，使用hexo d 将文件部署至仓库
然后访问网站便可以看到啦
发布文章
这样就可以啦！