基于hexo+GitHub/Gitee创建个人网站

2024-09-03 06:18

本文主要是介绍基于hexo+GitHub/Gitee创建个人网站,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

创建博客前置需求

  • 已经安装了gitbash
  • 会使用gitbash
  • 已经配置好SSH
  • 已经安装Node.js
  • 会使用npm

如果不会的话可以点后面的链接去学习。

开始创建博客

1 创建博客

1.1安装hexo

全局安装hexo-cli

npm install hexo-cli -g

fsQ63Q.png

安装完成就能看到绿框里的东西了。
治愈那两个警告不用管它,因为fsevent是mac osx的,在Windows或者Linux下会有警告,忽略即可。

1.2创建好博客文件夹

1.创建
有两种方法:

  • 进入你要建博客的文件夹

    1.打开命令行工具

    ​ 可以使用gitbash,直接在文件夹里右键→git bash

    ​ 也可以使用cmd,在文件夹地址栏输入cmd回车

    2.创建并初始化一个存放博客代码的文件夹

    hexo init 文件夹名字
    

    3.进入这个文件夹

    cd 文件夹名字
    
  • 进入你要建博客的文件夹

    1.创建一个存放博客代码的文件夹,并进入文件夹

    2.打开命令行工具

    3.初始化

    hexo init
    

2.安装依赖

进入你已经创建的存放博客代码的文件夹

然后,安装一些依赖:

npm install

2 新建文章

2.1 新建文章

现在先不用管博客美化的问题,现在的第一件事情是可以看到也就是在浏览器可以预览到自己的博客,并且能推送到GitHub/Gitee上并且能访问到。

hexo new "文章名"

fyAnAJ.png

创建完毕,成功之后会告诉你已经在_post文件夹下创建好了。打开看一下,里边的helloworld是默认就有的,你可以先不用管,不想看可以直接删了。

fyAQ91.png

打开你新建的文件给它写几句内容。你不想写可以先不写。

fyAUNd.png

tags:最好填写自己的标签分类

2.2 生成静态页面

刚才你所创建的文件以及写入的内容均在一个文本文档里面,这一步就是将你的文本文件解析为静态网页。

hexo generate# 生成静态网页

2.3 本地预览

如果你不想在本地看一下是什么效果,可以跳过这一步。

hexo clean# 清理一下
hexo server# 启动本地服务

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TPsbuMz4-1628910341385)(https://z3.ax1x.com/2021/08/14/fyEF5d.png)]

注意不要关闭命令工具,不要按Ctrl + C,在浏览器输入提示你的地址你就可以看到页面了,看完之后不需要了,你可以回到命令工具,按Ctrl + C停止后台服务。

3 部署到GitHub/Gitee

3.1 下载hexo-deployer-git

使用github的也知道,本地上传文件给远程仓库是需要添加remote,然后自己add commit push等等。但是使用hexo就不用管这些了。hexo可以帮你完成这些繁琐的工作。
首先你要下载一个帮你完成工作的工具:

npm install hexo-deployer-git --save

3.2 Github仓库

确定你的github已经配置好SSH秘钥了。
在github新建一个仓库,取名用户名.github.io,其实你可以不叫这个,随便取一个的。
区别在于,如果你使用用户名.github.io,那你的页面访问的时候就是https://用户名.github.io,你要是随便取一个,那就是https://用户名.github.io/仓库名/。
建好仓库之后进去,复制SSH链接,记住是SSH链接不是https链接,否则部署时候会失败。

fyE5id.png

3.3 Gitee仓库

确定你的gitee已经配置好SSH秘钥了。
在gitee新建一个仓库,取名用户名.gitee.io,其实你可以不叫这个,随便取一个的。
区别在于,如果你使用用户名.gitee.io,那你的页面访问的时候就是https://用户名.gitee.io,你要是随便取一个,那就是https://用户名.gitee.io/仓库名/。
建好仓库之后进去,复制SSH链接,记住是SSH链接不是https链接,否则部署时候会失败。

fyVUSI.png

3.4 修改_config.yml

回到你的博客文件夹,找到_config.yml文件,对其进行修改。用记事本打开,拉到最底下

# 只推送到github
deploy:type: gitrepo: 你刚才复制的branch: main #因为黑人运动主分支已经不叫master
# 只推动到gitee
deploy:type: gitrepo: 你刚才复制的branch: master

如果你只推送道github,你就按我给的代码写。如果你想同时部署到多个仓库,那你就按我下面里的写冒号是英文的,冒号后边有一个空格。注意格式否则会部署失败。

deploy:type: gitrepo: github: 你刚才复制的ssh地址gitee: git@gitee.com:gao_tengfei/gao_tengfei.gitee.io.gitbranch: master

3.5 部署

hexo clean
hexo generate
hexo deploy

如果你部署失败了……那应该是你的node版本太新了……卸载从头再来。
部署完成之后你的github/gtiee仓库里就有东西啦。

3.6 Github设置

fyeGRA.png

如果,你只向github推送,那么左上角分支那选择main就可以,如果你既向github又向gitee推送,这个时候你的分支要选择master才会有内容,然后点击右上角Settings,进入设置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3lqfzwlV-1628910341397)(https://z3.ax1x.com/2021/08/14/fyesRs.png)]

然后选择左下角Pages

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BUcI17CQ-1628910341400)(https://z3.ax1x.com/2021/08/14/fyeWZT.png)]

然后中间Your site is published at xxxxx,那个链接就是你的博客链接啦。

下面Source处,如果只想github推送,选择main分支即可,否则选择master分支。

3.7 Gitee设置

fymYY4.png

选择服务

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qzepAXRk-1628910341412)(https://z3.ax1x.com/2021/08/14/fymfXt.png)]

选择Gitee Pages,进去之后,现在是需要实名认证,然后就可以开通

4 更换主题以及美化

下一篇文章在介绍

这篇关于基于hexo+GitHub/Gitee创建个人网站的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1132261

相关文章

idea中创建新类时自动添加注释的实现

《idea中创建新类时自动添加注释的实现》在每次使用idea创建一个新类时,过了一段时间发现看不懂这个类是用来干嘛的,为了解决这个问题,我们可以设置在创建一个新类时自动添加注释,帮助我们理解这个类的用... 目录前言:详细操作:步骤一:点击上方的 文件(File),点击&nbmyHIgsp;设置(Setti

Spring 中使用反射创建 Bean 实例的几种方式

《Spring中使用反射创建Bean实例的几种方式》文章介绍了在Spring框架中如何使用反射来创建Bean实例,包括使用Class.newInstance()、Constructor.newI... 目录1. 使用 Class.newInstance() (仅限无参构造函数):2. 使用 Construc

C#原型模式之如何通过克隆对象来优化创建过程

《C#原型模式之如何通过克隆对象来优化创建过程》原型模式是一种创建型设计模式,通过克隆现有对象来创建新对象,避免重复的创建成本和复杂的初始化过程,它适用于对象创建过程复杂、需要大量相似对象或避免重复初... 目录什么是原型模式?原型模式的工作原理C#中如何实现原型模式?1. 定义原型接口2. 实现原型接口3

使用DeepSeek搭建个人知识库(在笔记本电脑上)

《使用DeepSeek搭建个人知识库(在笔记本电脑上)》本文介绍了如何在笔记本电脑上使用DeepSeek和开源工具搭建个人知识库,通过安装DeepSeek和RAGFlow,并使用CherryStudi... 目录部署环境软件清单安装DeepSeek安装Cherry Studio安装RAGFlow设置知识库总

Python中conda虚拟环境创建及使用小结

《Python中conda虚拟环境创建及使用小结》本文主要介绍了Python中conda虚拟环境创建及使用小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们... 目录0.前言1.Miniconda安装2.conda本地基本操作3.创建conda虚拟环境4.激活c

使用Python创建一个能够筛选文件的PDF合并工具

《使用Python创建一个能够筛选文件的PDF合并工具》这篇文章主要为大家详细介绍了如何使用Python创建一个能够筛选文件的PDF合并工具,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录背景主要功能全部代码代码解析1. 初始化 wx.Frame 窗口2. 创建工具栏3. 创建布局和界面控件4

Java中对象的创建和销毁过程详析

《Java中对象的创建和销毁过程详析》:本文主要介绍Java中对象的创建和销毁过程,对象的创建过程包括类加载检查、内存分配、初始化零值内存、设置对象头和执行init方法,对象的销毁过程由垃圾回收机... 目录前言对象的创建过程1. 类加载检查2China编程. 分配内存3. 初始化零值4. 设置对象头5. 执行

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后

Python创建Excel的4种方式小结

《Python创建Excel的4种方式小结》这篇文章主要为大家详细介绍了Python中创建Excel的4种常见方式,文中的示例代码简洁易懂,具有一定的参考价值,感兴趣的小伙伴可以学习一下... 目录库的安装代码1——pandas代码2——openpyxl代码3——xlsxwriterwww.cppcns.c

nginx部署https网站的实现步骤(亲测)

《nginx部署https网站的实现步骤(亲测)》本文详细介绍了使用Nginx在保持与http服务兼容的情况下部署HTTPS,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值... 目录步骤 1:安装 Nginx步骤 2:获取 SSL 证书步骤 3:手动配置 Nginx步骤 4:测