从零开始使用Hexo搭建个人博客

2023-11-12


title: Hexo+Github搭建个人博客
date: 2022-07-26 19:53:05
tags: hexo


前往我的个人博客,阅读体验更佳本文链接

1. 环境准备

1.1 安装Git

Git 官网上下载安装。

安装好后,使用命令查看一下git版本,检查是否安装成功。

git -v

windows安装完git后,可以使用git bash敲命令。

1.2 安装node.js

直接到官网上下载。

同样,安装完成后,使用命令查看版本,检查是否安装成功。

node -v
npm -v

2. hexo安装与使用

2.1 安装hexo

创建一个文件夹blog,进入该文件夹,右键git bash here打开git bash,输入命令安装hexo:

npm install -g hexo-cli

2.2 初始化hexo

使用以下命令初始化hexo,其中myblog是自己随意取得名字

hexo init myblog

2.3 安装npm

进入myblog文件夹,安装npm:

cd myblog
npm install

新建完成后,指定文件夹目录下有:

  • node_modules: 依赖包
  • public:存放生成的页面
  • scaffolds:生成文章的一些模板
  • source:用来存放你的文章
  • themes:主题
  • _config.yml: 博客的配置文件

2.4 启动本地服务站点:

使用如下命令启动本地服务站点,每次提交新的部署之前也可以先启动本地服务站点检查。

hexo g //生成静态网页
hexo s //打开本地服务站点

在浏览器输入localhost:4000就可以看到生成的博客了,里面默认会有hello world这篇文章。

使用ctrl+c可以关掉本地服务。

hexo是一款静态框架,即我们在本地编写完文章后使用hexo g生成静态网页,然后将之部署到服务器上。

下面部署到github page上,以便大家可以访问。

3. Github建站访问

3.1 Github新建仓库

如果没有Github账号,注册一个,登录。

创建一个和你用户名相同的仓库,后面加.github.io。

在这里插入图片描述

注意:格式必须是xxx.github.io,其中xxx是你注册Github的用户名,只有这样部署到GitHub page的时候,才会被识别。

3.2 生成SSH添加到GitHub

回到git bash,输入以下命令:

git config --global user.name yourname
git config --global user.email youremail

这里的yourname输入你的GitHub用户名,youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。

可以用以下两条命令,检查一下你有没有输对:

git config user.name
git config user.email

然后创建SSH,一路回车

ssh-keygen -t rsa -C "youremail"

这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹。

在这里插入图片描述

而后在GitHub的setting中,找到SSH keys的设置选项,点击New SSH key把你的id_rsa.pub里面的信息复制进去。

在这里插入图片描述

在这里插入图片描述

Title随便写个名字,把id_rsa.pub里面的信息复制到key那里,点击Add SSH key

在git bash中,使用以下命令查看是否成功:

ssh -T git@github.com

在这里插入图片描述

3.3 将hexo部署到GitHub

这一步,我们就可以将hexo和GitHub关联起来,也就是将hexo生成的文章部署到GitHub上,打开站点配置文件_config.yml,翻到最后,修改为如下所示,其中YourgithubName就是你的GitHub账户。

deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

这个时候需要先安装deploy-git ,也就是部署的命令,这样你才能用命令部署到GitHub。

npm install hexo-deployer-git --save

然后

hexo clean
hexo generate
hexo deploy

其中 hexo clean清除了你之前生成的东西,也可以不加。hexo generate 顾名思义,生成静态文章,可以用 hexo g缩写。hexo deploy 部署文章,可以用hexo d缩写。

注意deploy时可能要你输入username和password。

得到下图就说明部署成功了,过一会儿就可以在http://yourname.github.io 这个网站看到你的博客了!!

在这里插入图片描述

3.4 发布文章

正式开始写文章了:

hexo new newpapername

然后在source/_post中打开对应的markdown文件,就可以开始编辑了。当你写完的时候,再

hexo clean
hexo g
hexo d

这样就可以在自己的博客网站上看到刚发布的文章了。

4. 多终端工作

4.1 原因

由于hexo d上传部署到github的其实是hexo编译后的文件,是用来生成网页的,不包含源文件,上传的就是本地目录里面自动生成的.deploy_git里面的文件。

而我们的源文件、主题文件、配置文件都没有上传,这也就意味着我们只能在一台电脑上操作,换了电脑就没法改变我们的网站了。

我们可以利用git的分支系统将源文件上传到仓库的另一个分支。

4.2 上传分支

首先在Github上新建一个分支hexo。

然后在这个仓库的settings中,选择默认分支为hexo分支(这样每次同步的时候就不用指定分支,比较方便)。

然后在本地的任意目录下,打开git bash,输入以下命令:

git clone git@github.com:TyroGzl/TyroGzl.github.io.git

将hexo分支克隆到本地。

接下来在克隆到本地的TyroGzl.github.io中,把除了.git 文件夹外的所有文件都删掉

把之前我们写的博客源文件全部复制过来,除了.deploy_git。

复制过来的源文件应该有一个.gitignore,用来忽略一些不需要的文件,如果没有的话,自己新建一个,在里面写上如下内容,表示这些类型文件不需要git:

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

而后

git add .
git commit –m "add branch"
git push 

这样就上传完了,可以去Github上看一看hexo分支有没有上传上去,其中node_modulespublicdb.json已经被忽略掉了,没有关系,不需要上传的,因为在别的电脑上需要重新输入命令安装 。

在这里插入图片描述

4.3 更换电脑操作

4.3.1 安装git

4.3.2 设置git全局邮箱和用户名

4.3.3 设置ssh key

ssh-keygen -t rsa -C youremail
#生成后填到github
#验证是否成功
ssh -T git@github.com

4.3.4 安装node.js

4.3.5 安装hexo

npm install hexo-cli -g

4.3.6 克隆项目

git clone git@………………

4.3.7 安装npm

进入到克隆的文件夹:

cd xxx.github.io
npm install
npm install hexo-deployer-git --save

生成,部署:

hexo g
hexo d

以上内容摘自:hexo史上最全搭建教程_zjufangzh的博客-CSDN博客_hexo

5. 使用Vercel代理Github Page

由于Github拒绝百度爬虫的访问,导致基于Github Page的个人博客无法被百度收录,这里介绍一个免费的方法,利用zeit(现在改名为vercel)代理。

5.1 Github账户登录vercel

打开vercel网站。选择 Continue with Github,利用自己的Github账号登录。
在这里插入图片描述

5.2 新建vercel项目

点击New Project,新建项目。
在这里插入图片描述

导入Github仓库。

在这里插入图片描述
为项目起个名字,点击Deploy
在这里插入图片描述
新建项目成功。

5.3 切换分支

vercel默认分支名是main,即上传到Github仓库main分支中才会触发更新,打开项目中的Settings,选择Git,将分支名改为自己部署静态网页资源的分支名。
在这里插入图片描述

5.4 配置个人域名

同样在项目里的Settings里面,打开Domains,新增自己的个人域名,然后在自己的域名服务商那里添加一条DNS解析。完成配置,这样百度爬虫就可以爬取我们的网站了。

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从零开始使用Hexo搭建个人博客 的相关文章

随机推荐

  • Redis+Lua限制发送量及遇到的坑

    业务中需要限制每个账号每天发送短信数量 如果没有超过设置的发送量 则正常发送 否则返回失败 解决思路 将账号ID yyyyMMdd组成redis的key value为当天的发送量 在发送前获取账号ID yyyyMMdd的值 如果没有超过发送
  • MachineLearningWu_13/P60-P64_Tensorflow

    P60 P64的学习目录如下 x 1 TF网络模型实现 以一个简单的TF的分类网络为例 将模型翻译成框架下的语义 即如右侧所表达的 当然上面对于分类网络的解释是一个简洁的解释 我们来进行更加具象的了解一下 左边是机器学习的三步骤 1 给定输
  • next_permutation 函数的使用 poj1256

    next permutation全排列函数是一个十分好用而且强大的函数 要想更好的了解这个函数可以看https blog csdn net howardemily article details 68064377 个人感觉写的特别好 里面有
  • <<视觉问答>>2021:Separating Skills and Concepts for Novel Visual Question Answering

    目录 摘要 一 介绍 二 相关工作 三 Skill Concept Composition in VQA 四 方法 4 1 Concept Grounding 4 2 Skill Matching 4 3 Training Procedur
  • 父子组件传值,子组件数据不更新

    项目场景 提示 这里简述项目相关背景 例如 查看列表中的某一条 显示这条的详情信息 这里的详情是一个弹框子组件 后台管理系统 问题描述 提示 这里描述项目中遇到的问题 在父子组件传参时 父组件将值传到子组件后 子组件进行数据展示 在第一次传
  • python3 request post请求中文例子

    下面是一个使用Python 3发送POST请求并包含中文数据的示例 import requests 请求URL url https example com api 请求头部设置 headers Content Type applicatio
  • Derby 和 Sqlite 数据库的配置与使用

    Derby 和 Sqlite 数据库的配置与使用 Derby 和 Sqlite 数据库 一种无需安装可直接使用的数据库 使用这两个数据库只需要下载其文件夹并配置其环境变量 然后导入对应的 jar 包即可直接使用 不同于 Mysq 和 Ora
  • 欧拉函数以及欧拉降幂

    大数幂运算指数太大的时候 我们需要进行降幂操作 首先呢 认识欧拉定理之前 先了解一下欧拉函数 欧拉函数性质 若p是一个质数 那么 p p 1 欧拉函数是积性函数 所以 nm n m 若n p k且p为质数 那么 n p k p k 1 证明
  • 耐人思考的“30秒法则”

    时间管理 30秒法则 也被称为 电梯法则 这个法则说得是 凡事要在最短的时间内把结果表达清楚 凡事要直奔主题 直奔结果 这个30秒法则 是由一个真实的故事引申出来的 美国知名咨询公司麦肯锡 有一位重要的大客户来公司洽谈 董事长因急事赶飞机
  • STM32毕业设计题目选题分享

    文章目录 1前言 2 STM32 毕设课题 3 如何选题 3 1 不要给自己挖坑 3 2 难度把控 3 3 如何命名题目 1前言 更新单片机嵌入式选题后 不少学弟学妹催学长更新STM32和C51选题系列 感谢大家的认可 来啦 以下是学长亲手
  • java 以流的形式从服务器下载文件并保存到本地

    1 基本实现流程 当我们想要下载网站上的某个资源时 我们会获取一个url 它是服务器定位资源的一个描述 下载的过程有如下几步 1 客户端发起一个url请求 获取连接对象 2 服务器解析url 并且将指定的资源返回一个输入流给客户 3 建立存
  • JavaScript设计模式读书笔记(五)=>架构型设计模式,MVC,MVP,MVVM

    全系列目录 JavaScript设计模式读书笔记 一 gt 创建型设计模式 JavaScript设计模式读书笔记 二 gt 结构型设计模式 JavaScript设计模式读书笔记 三 gt 行为型设计模式 JavaScript设计模式读书笔记
  • ] 2014找工作总结-机会往往留给有准备的人

    看了这篇文章 感觉到了震撼 如果早看到该有多好 我也是2014年的毕业生 我的找工作历程也基本上告一段落了 与本博文的原作者比起来 自己仿佛到现在也没有真正的为工作而准备 这也是自己没有规划的原因吧 所以在找工作的过程中只收到了一个offe
  • 电脑与云服务器传输文件,电脑与云服务器传输文件

    电脑与云服务器传输文件 内容精选 换一换 当创建文件系统后 您需要使用云服务器来挂载该文件系统 以实现多个云服务器共享使用文件系统的目的 本章节以Windows 2012版本操作系统为例进行CIFS类型的文件系统的挂载 同一SFS容量型文件
  • react map循环生成的button_【第1945期】彻底搞懂React源码调度原理(Concurrent模式)...

    前言 估计会懵逼 今日早读文章由成都 苏溪云投稿分享 正文从这开始 最早之前 React还没有用fiber重写 那个时候对React调度模块就有好奇 而现在的调度模块对于之前没研究过它的我来说更是带有一层神秘的色彩 色彩中朦胧浮现出两个字
  • ZIGBEE: Error[Pa045]: function "" has no prototype问题解决方法

    IAR CC2530的2个程序整合后 报错 而全部错误都是一个性质 Error Pa045 function has no prototype 去掉 Require prototype选项 重新编译即可 应该是一个编译顺序问题
  • 大屏三维地图怎么做?什么软件可以做室内地图?

    人们80 的活动时间是在室内 因此室内生成的数据量巨大且异常重要 在各类数据中 室内电子地图空间数据是非常重要的数据支撑 基于空间数据 一方面服务于C端客户 为C端客户的快速位置查询 了解室内地物分布及路径导航指引等提供服务 另一方面 地图
  • ng-alain 添加tinymce及tinymce图片上传功能模块

    tinymce的使用 tinymce中文文档 默认ng alain 已经内置了tinymc 查看共享模块是否加载了tinymce import NgxTinymceModule from ngx tinymce const THIRDMOD
  • 【牛客网练习题】Java专项练习(50题)含解析

    目录 1 运行结果 3 5 6 7 2 jdk1 8中 下面有关java 抽象类和接口的区别 说法错误的是 B D 3 在 applet 的方法中 可关闭小应用程序并释放其占用资源的是 D 4 对于构造方法 下列叙述正确的是 A C D 5
  • 从零开始使用Hexo搭建个人博客

    title Hexo Github搭建个人博客 date 2022 07 26 19 53 05 tags hexo 前往我的个人博客 阅读体验更佳本文链接 1 环境准备 1 1 安装Git 到Git 官网上下载安装 安装好后 使用命令查看