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

机缘巧合了解到了个人博客这个东西,之前试过一次,但是因为某些原因,让我放弃了,感觉太难了,但是这次下定决心,花了很长的时间终于是搞定了,虽然找到了很详细的教程,但是也遇到了很多的问题,主要还是要细心,同时出现了问题其实都可以搜索到解决方法,下边将自己的搭建过程做一个记录。
先附上大佬教程: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” :
使用hexo和github搭建个人博客网站详细流程_第1张图片

命名一定要和用户名一致,类似: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
安装完成后,输入 hexo init命令初始化博客:
使用hexo和github搭建个人博客网站详细流程_第2张图片
然后输入 hexo g 静态部署:
使用hexo和github搭建个人博客网站详细流程_第3张图片
这时网页已经部署完成,输入 hexo s 命令可以查看:

浏览器输入 http://localhost:4000 就可以打开新部署的网页:
因为自己已经部署完成了,所以借助了一下其他地方的图片展示
使用hexo和github搭建个人博客网站详细流程_第4张图片
使用Ctrl+c 可以停止运行服务器

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

2.将hexo部署到github上

现在回到我们的 Blog 文件夹,用笔记本打开 _config.yml 文件,如下图:
使用hexo和github搭建个人博客网站详细流程_第5张图片
打开后,下滑至文件底部,填上以下内容:

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和github搭建个人博客网站详细流程_第6张图片
其二、hexo d命令问题:
我们使用hexo d命令是将文件部署至仓库中,但是由于网络的问题时常会出现下图情况,没关系,ctrl+c 退出,重新执行一次命令试试
使用hexo和github搭建个人博客网站详细流程_第7张图片

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

三、使用matery主题美化博客

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

别的不说,先把大佬教程奉上,很全面:matery主题详细配置
虽然我通过这个教程完成了,但是刚开始好多没看明白,后边终于搞懂了,害
接下来在奉上自己的配置流程
使用hexo和github搭建个人博客网站详细流程_第8张图片
刚开始自己在这就吃亏了,这个主题是放在blog文件夹里的themes文件夹,不是再里边的hexo里的themes文件夹,这里提个醒

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

然后在跟着教程创建tags等页面:
使用hexo和github搭建个人博客网站详细流程_第9张图片
当然类似一些聊天、评论的配置就没有进行详细的配置了,下一篇在进行深入美化哦,这里只做基础配置

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

额外补充

补充一下如何发布文章,我自己在用的就是csdn,里边有这个Markdown编辑器,写完文章后可以导出,然后保存在blog文件夹source文件夹中的_posts文件夹中,然后在用记事本打开文件
使用hexo和github搭建个人博客网站详细流程_第10张图片
title : 标题
categories : 分类
tags : 标签
将文件进行修改后在使用hexo“三部曲”中的hexo g 生成文件,使用hexo d 将文件部署至仓库
然后访问网站便可以看到啦
使用hexo和github搭建个人博客网站详细流程_第11张图片
这样就可以啦!

总结

一个简单的个人博客就完成啦,大家都可以试着去操作一下,虽然这只是最基础的步骤,但是后续还会继续完善自己的小站哒,大家有空可以来关顾下我的网站哦:没事请叫我去学习
未完待续,下次再见啦!

你可能感兴趣的:(github,git,hexo)