基于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

相关文章

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如,在当前目录下创建一个名为 myenv 的虚拟环境: python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行: source myenv/bin/activate 3.与notebook连接 在虚拟环境中,使用 pip 安装 Jupyter 和 ipykernel: pip instal

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目,文件名一般为项目名8 确定

Java 创建图形用户界面(GUI)入门指南(Swing库 JFrame 类)概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包,是 JAVA 基础类的一部分,基于 Java AWT 构建,提供了一系列轻量级、可定制的图形用户界面(GUI)组件。 与 AWT 相比,Swing 提供了许多比 AWT 更好的屏幕显示元素,更加灵活和可定制,具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多

顺序表之创建,判满,插入,输出

文章目录 🍊自我介绍🍊创建一个空的顺序表,为结构体在堆区分配空间🍊插入数据🍊输出数据🍊判断顺序表是否满了,满了返回值1,否则返回0🍊main函数 你的点赞评论就是对博主最大的鼓励 当然喜欢的小伙伴可以:点赞+关注+评论+收藏(一键四连)哦~ 🍊自我介绍   Hello,大家好,我是小珑也要变强(也是小珑),我是易编程·终身成长社群的一名“创始团队·嘉宾”

Maven创建项目中的groupId, artifactId, 和 version的意思

文章目录 groupIdartifactIdversionname groupId 定义:groupId 是 Maven 项目坐标的第一个部分,它通常表示项目的组织或公司的域名反转写法。例如,如果你为公司 example.com 开发软件,groupId 可能是 com.example。作用:groupId 被用来组织和分组相关的 Maven artifacts,这样可以避免

速盾高防cdn是怎么解决网站攻击的?

速盾高防CDN是一种基于云计算技术的网络安全解决方案,可以有效地保护网站免受各种网络攻击的威胁。它通过在全球多个节点部署服务器,将网站内容缓存到这些服务器上,并通过智能路由技术将用户的请求引导到最近的服务器上,以提供更快的访问速度和更好的网络性能。 速盾高防CDN主要采用以下几种方式来解决网站攻击: 分布式拒绝服务攻击(DDoS)防护:DDoS攻击是一种常见的网络攻击手段,攻击者通过向目标网

HomeBank:开源免费的个人财务管理软件

在个人财务管理领域,找到一个既免费又开源的解决方案并非易事。HomeBank 正是这样一个项目,它不仅提供了强大的功能,还拥有一个活跃的社区,不断推动其发展和完善。 开源免费:HomeBank 是一个完全开源的项目,用户可以自由地使用、修改和分发。用户友好的界面:提供直观的图形用户界面,使得非技术用户也能轻松上手。数据导入支持:支持从 Quicken、Microsoft Money

如何提高 GitHub 的下载速度

如何提高 GitHub 的下载速度 文章目录 如何提高 GitHub 的下载速度1. 注册账号2. 准备好链接3. 创建仓库4. 在码云上下载代码5. 仓库更新了怎么办 一般来说,国内的朋友从 GitHub 上面下载代码,速度最大是 20KB/s,这种龟速,谁能忍受呢? 本文介绍一种方法——利用“码云”,可以大大提高下载速度,亲测有效。 1. 注册账号 去“码云”注册一

批处理以当前时间为文件名创建文件

批处理以当前时间为文件名创建文件 批处理创建空文件 有时候,需要创建以当前时间命名的文件,手动输入当然可以,但是有更省心的方法吗? 假设我是 windows 操作系统,打开命令行。 输入以下命令试试: echo %date:~0,4%_%date:~5,2%_%date:~8,2%_%time:~0,2%_%time:~3,2%_%time:~6,2% 输出类似: 2019_06

ORACLE 11g 创建数据库时 Enterprise Manager配置失败的解决办法 无法打开OEM的解决办法

在win7 64位系统下安装oracle11g,在使用Database configuration Assistant创建数据库时,在创建到85%的时候报错,错误如下: 解决办法: 在listener.ora中增加对BlueAeri-PC或ip地址的侦听,具体步骤如下: 1.启动Net Manager,在“监听程序”--Listener下添加一个地址,主机名写计