使用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来美化一下我们的博客。

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