使用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” :

命名一定要和用户名一致,类似: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 g 静态部署

这时网页已经部署完成,输入 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 的缩写)

1

2

3

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

相关文章
利用 GitHub Actions 自动化你的软件开发流程
GitHub Actions 是由 GitHub 提供的自动化工具,可让你在仓库中触发和执行自动化工作流程,如自动运行测试和部署应用。其核心概念包括工作流程(定义在 YAML 文件中的一系列自动化步骤)、作业和步骤。本文将指导你如何设置和使用 GitHub Actions,并提供实用的自动化示例,帮助你提高开发效率和代码质量。通过简单的配置文件,你可以实现自动运行测试、部署应用甚至自动合并 Pull Requests。
利用 GitHub Actions 自动化你的软件开发流程
在现代软件开发中,自动化是提升效率与质量的关键。GitHub Actions 作为 GitHub 的强大自动化工具,允许你在仓库中自动执行多种任务,如测试、打包、部署代码及自动合并 Pull Requests。本文介绍了 GitHub Actions 的核心概念、设置方法及其实用示例,帮助你快速上手并优化开发流程。通过 YAML 文件定义的工作流程可显著提高工作效率和代码质量。
|
2月前
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
3月前
|
资源调度 搜索推荐 Shell
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress,可以轻松搭建组件库的文档站点,并实现 Algolia 搜索功能。此外,还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后,展示了完整的目录结构和网站效果。
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
2月前
|
开发者
利用 GitHub Actions 自动化你的软件开发流程
在快速发展的软件开发环境中,自动化对于提升效率与质量至关重要。GitHub Actions 作为一款强大的工具,能帮助开发者实现从自动运行测试到部署应用等工作的自动化。本文详细介绍了 GitHub Actions 的核心概念、设置方法及实际应用示例,如自动测试、部署和合并 Pull Requests,助力提升开发流程的自动化水平。
利用 GitHub Actions 自动化你的软件开发流程
GitHub Actions 是 GitHub 提供的自动化工具,可在仓库中触发和执行工作流程,包括自动运行测试、部署应用等。其核心概念包括工作流程(Workflow)、作业(Job)和步骤(Step),均定义在 YAML 文件中。本文将指导你如何设置和使用 GitHub Actions,并提供自动运行测试、部署应用及合并 Pull Requests 的示例,帮助提高开发效率和代码质量。
|
3月前
|
安全 网络协议 Shell
Github代码仓库SSH配置流程
这篇文章是关于如何配置SSH以安全地连接到GitHub代码仓库的详细指南,包括使用一键脚本简化配置过程、生成SSH密钥对、添加密钥到SSH代理、将公钥添加到GitHub账户以及测试SSH连接的步骤。
76 0
Github代码仓库SSH配置流程
|
5月前
|
开发工具 git
【笔记】十分钟学会正确的github工作流,和开源作者们使用同一套流程
【笔记】十分钟学会正确的github工作流,和开源作者们使用同一套流程
101 11
|
5月前
|
存储 前端开发 对象存储
基于jsDelivr+Github给网站如何换个漂亮的字体。
本文介绍了如何为博客自定义字体。首先,从免费字体网站(如100字体下载站)下载字体,然后使用在线工具(如fontformat.com)转换字体格式为eot, woff, woff2, svg和ttf。接着,将字体文件上传至GitHub仓库,利用jsDelivr+GitHub的CDN服务获取文件链接。最后,通过编写@font-face的CSS样式代码,将自定义字体应用到博客中。注意文件名避免使用中文,并确保所有浏览器兼容。
59 2
|
6月前
|
JavaScript 网络安全 开发工具
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
下一篇
无影云桌面