【前端】Hexo 建站指南

文章目录

    • 前言
    • 生成站点
    • 本地测试
    • 部署云端
    • 参考

前言

更好的阅读体验:https://blog.dwj601.cn/FrontEnd/Hexo/build-your-own-website-with-hexo/

笔记记多了,想要分享给同学们一起交流进步,该怎么办?想要搭建一个属于自己的知识库,不仅仅局限在 PC 上,移动端也能随时查看与编辑,该怎么办?搭建一个属于自己的博客网站是是一个不错的选择!现在主流建站模式有两个:

  1. 有后端:WordPress;
  2. 无后端:Hexo、VuePress、Gatsby。

有后端的博客网站可以是可以,但是对于轻量化的个人知识博客显得有些笨重,而无后端的「静态站点」很适合更新不怎么频繁的中小型知识库场景。所谓的静态站点,其实就是利用一个转换工具将自己写好的 Markdown 笔记文件转换为 HTML 文件,打包部署后就可以全球共享了。也就是说我们只需要关注文章的内容本身,即可在极短的时间内构建一个所有人都可以访问的博客网站。

本博客以 Hexo 为例讲解如何从零开始搭建一个自己的博客网站。在开始之前,你需要确保本地机配置好了 Node 运行时环境、Git 工具链和一个 GitHub 账号。

生成站点

我们需要创建一个虚拟环境用来管理我们博客网站的内容。

1)安装 Hexo 的命令行工具

npm install -g hexo-cli

2)初始化一个静态站点

hexo init

3)安装所有依赖

npm install

本地测试

1)生成静态文件

hexo generate  # 可简写为 hexo g

2)启动本地服务

hexo server  # 可简写为 hexo s

Hexo 服务默认占用 4000 端口。现在用浏览器访问 http://localhost:4000,如果可以看到 Hexo 的默认博客网站,那么你已经成功了大半。

部署云端

这里介绍一种容错率较高的部署方案。基于 Hexo 插件 hexo-deploy-git 将网站部署到 GitHub Pages 上。

简单介绍一下 GitHub Pages。这是 GitHub 官方提供的静态站点托管平台,其可以以「项目、个人和组织」三种形式进行托管,例如项目可以通过 https://<username or organization>.github.io/<project>/ 访问到;个人可以通过 https://<username>.github.io/ 访问到;组织可以通过 https://<organization>.github.io/ 访问到。

下面以项目部署方式为例,将站点部署到 https://<username>.github.io/<repo>

1)安装 Hexo 部署包 hexo-deployer-git

npm install hexo-deployer-git --save  # --save 是为了写入库依赖表 packge.json

2)创建一个 GitHub 仓库并将本地项目推送到 GitHub(如果想要以个人或组织的形式建站,就将仓库名取为 <username or organization>.github.io,否则随意)

git add .
git commit -m 'init'
git remote add origin https://github.com/Explorer-Dong/demo.git
git push -u origin main

3)配置 _config.yml 文件(假设仓库名为 demo 并且将站点托管在推送到仓库的 public 分支下)

# 网站地址
url: https://explorer-dong.github.io/demo# 部署策略
deploy:type: gitrepo: https://github.com/Explorer-Dong/demo.gitbranch: public

4)部署(其实就是把生成的网站 push 到上述部署策略的仓库分支中)

hexo deploy  # 可简写为 hexo d

5)配置 Github Pages。选择 Source 为 Deploy from a branch 并选用 public 分支

配置 Github Pages 页面

现在访问 https://<username>.github.io/demo/,如果可以看到与之前本地测试时一样的界面,恭喜你,现在已经可以在项目的 source/_post/ 目录下撰写博客并且全球共享了!

参考

搭建教程:Luke教你20分钟快速搭建个人博客系列(hexo篇)

个性定制:GitHub Pages + Hexo搭建个人博客网站,史上最全教程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/6484.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目

写这篇文章的初衷并不是要大家真的不用node和vscode&#xff0c;说实话前端发展成今天这样&#xff0c;在实际开发中确实离不开node和vscode这类工具了&#xff0c;但往往工具用多了我们自己也成了一个工具人&#xff01; 这篇文章的缘由 最近在开发wordpress插件的时候&…

Gin 学习笔记

教程地址&#xff1a;https://www.bilibili.com/video/BV1FV4y1C72M?spm_id_from333.788.videopod.sections&vd_source707ec8983cc32e6e065d5496a7f79ee6 01-项目搭建 各常用目录的说明&#xff1a; https://github.com/golang-standards/project-layout/blob/master/REA…

麒麟操作系统服务架构保姆级教程(十四)iptables防火墙四表五链和防火墙应用案例

如果你想拥有你从未拥有过的东西&#xff0c;那么你必须去做你从未做过的事情 防火墙在运维工作中有着不可或缺的重要性。首先&#xff0c;它是保障网络安全的关键防线&#xff0c;通过设置访问控制规则&#xff0c;可精准过滤非法网络流量&#xff0c;有效阻挡外部黑客攻击、恶…

双目立体校正和Q矩阵

立体校正 对两个摄像机的图像平面重投影&#xff0c;使二者位于同一平面&#xff0c;而且左右图像的行对准。 Bouguet 该算法需要用到双目标定后外参(R&#xff0c;T) 从上图中可以看出&#xff0c;该算法主要分为两步&#xff1a; 使成像平面共面 这个办法很直观&#xff…

【C++】string类模拟实现

目录 &#x1f495;1.模拟string类构造函数 &#x1f495;2.模拟构造函数实现 &#x1f495;3.拷贝构造函数模拟实现 &#x1f495;4.析构函数模拟实现 &#x1f495;5.size函数&#xff0c;capacity函数模拟实现 &#x1f495;6.begin函数,end函数&#xff0c;模拟实…

微调Qwen2:7B模型,加入未知信息语料

对于QWen2这样的模型,在微调的时候,语料的投喂格式满足ChatML这样的格式!!! OpenAI - ChatML: 下面是ChatML格式的介绍: https://github.com/openai/openai-python/blob/release-v0.28.0/chatml.mdhttps://github.com/openai/openai-python/blob/release-v0.28.0/chat…

.Net Core微服务入门全纪录(四)——Ocelot-API网关(上)

系列文章目录 1、.Net Core微服务入门系列&#xff08;一&#xff09;——项目搭建 2、.Net Core微服务入门全纪录&#xff08;二&#xff09;——Consul-服务注册与发现&#xff08;上&#xff09; 3、.Net Core微服务入门全纪录&#xff08;三&#xff09;——Consul-服务注…

HTML根元素<html>的语言属性lang:<html lang=“en“>

诸神缄默不语-个人CSDN博文目录 在编写HTML页面时&#xff0c;通常会看到<html lang"en">这行代码&#xff0c;特别是在网页的开头部分&#xff0c;就在<!DOCTYPE html>后面。许多开发者可能对这个属性的含义不太了解&#xff0c;它到底有什么作用&…

小样本学习中的Prototypical Network(原型网络)详解

Few-shot Learning ,即“小样本学习”,是一种机器学习方法,旨在通过极少量样本训练模型,使其能够快速适应新任务或新类别。这种方法在数据稀缺的场景中非常有用。 Prototypical Network(原型网络)是小样本学习中的经典方法之一,特别适用于分类任务。它的核心思想是通过学…

mock可视化生成前端代码

介绍&#xff1a;mock是我们前后端分离的必要一环、ts、axios编写起来也很麻烦。我们就可以使用以下插件&#xff0c;来解决我们的问题。目前支持vite和webpack。&#xff08;配置超级简单&#xff01;&#xff09; 欢迎小伙伴们提issues、我们共建。提升我们的开发体验。 vi…

(回溯分割)leetcode93 复原IP地址

#include<iostream> #include<vector> #include<string> #include<algorithm> using namespace std; //卡尔的图不是按照程序执行过程而是直接画程序会执行的过程 // 实际执行是&#xff1a;n个字符&#xff0c;递推n1后&#xff08;叶子节点&#xff…

Springboot3 自动装配流程与核心文件:imports文件

注&#xff1a;本文以spring-boot v3.4.1源码为基础&#xff0c;梳理spring-boot应用启动流程、分析自动装配的原理 如果对spring-boot2自动装配有兴趣&#xff0c;可以看看我另一篇文章&#xff1a; Springboot2 自动装配之spring-autoconfigure-metadata.properties和spring…

JVM面试题解,垃圾回收之“分代回收理论”剖析

一、什么是分代回收 我们会把堆内存中的对象间隔一段时间做一次GC&#xff08;即垃圾回收&#xff09;&#xff0c;但是堆内存很大一块&#xff0c;内存布局分为新生代和老年代、其对象的特点不一样&#xff0c;所以回收的策略也应该各不相同 对于“刚出生”的新对象&#xf…

“腾讯、钉钉、飞书” 会议开源平替,免费功能强大

在数字化时代&#xff0c;远程办公和线上协作越来越火。然而&#xff0c;市面上的视频会议工具要么贵得离谱&#xff0c;要么功能受限&#xff0c;甚至还有些在数据安全和隐私保护上让人不放心。 今天开源君给大家安利一个超棒的开源项目 - Jitsi Meet&#xff0c;这可是我在网…

CNN-GRU卷积门控循环单元时间序列预测(Matlab完整源码和数据)

CNN-GRU卷积门控循环单元时间序列预测&#xff08;Matlab完整源码和数据&#xff09; 目录 CNN-GRU卷积门控循环单元时间序列预测&#xff08;Matlab完整源码和数据&#xff09;预测效果基本介绍CNN-GRU卷积门控循环单元时间序列预测一、引言1.1、研究背景与意义1.2、研究现状1…

状态模式——C++实现

目录 1. 状态模式简介 2. 代码示例 3. 单例状态对象 4. 状态模式与策略模式的辨析 1. 状态模式简介 状态模式是一种行为型模式。 状态模式的定义&#xff1a;状态模式允许对象在内部状态改变时改变它的行为&#xff0c;对象看起来好像修改了它的类。 通俗的说就是一个对象…

大华相机DH-IPC-HFW3237M支持的ONVIF协议

使用libONVIF C库。 先发现相机。 配置 lib目录 包含 编译提示缺的文件&#xff0c;到libonvif里面拷贝过来。 改UDP端口 代码 使用msvc 2022的向导生成空项目&#xff0c;从项目的main示例拷贝过来。 CameraOnvif.h #pragma once#include <QObject> #include &l…

WIN11 UEFI漏洞被发现, 可以绕过安全启动机制

近日&#xff0c;一个新的UEFI漏洞被发现&#xff0c;可通过多个系统恢复工具传播&#xff0c;微软已经正式将该漏洞标记为追踪编号“CVE-2024-7344”。根据报告的说明&#xff0c;该漏洞能让攻击者绕过安全启动机制&#xff0c;并部署对操作系统隐形的引导工具包。 据TomsH…

Kyligence AI 数据智能体:首批亮相神州数码 DC·AI 生态创新中心!

近日&#xff0c;跬智信息&#xff08;Kyligence&#xff09;长期合作伙伴神州数码&#xff0c;其 DCAI 生态创新中心正式启幕。 作为首批生态伙伴&#xff0c;Kyligence AI 数据智能体也正式入驻&#xff0c;在这里首次亮相。 Kyligence 是国内最早推出 AI 用数产品的厂商&a…

GS论文阅读--Hard Gaussian Splatting

前言 本文也是对高斯点云的分布进行优化的&#xff0c;看&#xff01; 文章目录 前言1.背景介绍2.关键内容2.1 位置梯度驱动HGS2.2 渲染误差引导HGS 3.文章贡献 1.背景介绍 在训练过程中&#xff0c;它严重依赖于视图空间位置梯度的平均幅度来增长高斯以减少渲染损失。然而&…