【前端】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: git
  repo: https://github.com/Explorer-Dong/demo.git
  branch: 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搭建个人博客网站,史上最全教程

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LetsWave脑电数据简单时频分析及画图matlab(二)

在笔记&#xff08;一&#xff09;中的文档链接&#xff0c;有很详细的介绍时频分析。这里简单描述&#xff0c;letswave7中有两种方法&#xff0c;一种是STFT&#xff08;短时傅里叶变换&#xff09;和CWT&#xff08;连续小波变换&#xff09;。&#xff08;一&#xff09;中…

【二叉树的深搜】二叉树剪枝

文章目录 814. 二叉树剪枝解题思路&#xff1a;深度优先遍历 后序遍历另一种写法 814. 二叉树剪枝 814. 二叉树剪枝 ​ 给你二叉树的根结点 root &#xff0c;此外树的每个结点的值要么是 0 &#xff0c;要么是 1 。 ​ 返回移除了所有不包含 1 的子树的原二叉树。 ​ 节点…

快速搭建深度学习环境(Linux:miniconda+pytorch+jupyter notebook)

本文基于服务器端环境展开&#xff0c;使用的虚拟终端为Xshell。 miniconda miniconda是Anaconda的轻量版&#xff0c;仅包含Conda和Python&#xff0c;如果只做深度学习&#xff0c;可使用miniconda。 [注]&#xff1a;Anaconda、Conda与Miniconda Conda&#xff1a;创建和管…

01-硬件入门学习/嵌入式教程-CH340C使用教程

前言 CH340C广泛应用于DIY项目和嵌入式开发中&#xff0c;用于USB数据转换和串口通信。本文将详细介绍CH340C的基本功能、引脚接线及使用方法。 CH340C简介 CH340C是一款USB转TTL电平转换器&#xff0c;可以将电脑的USB数据转换成串口数据&#xff0c;方便与单片机&#xff…

PID 控制算法(二):C 语言实现与应用

在本文中&#xff0c;我们将用 C 语言实现一个简单的 PID 控制器&#xff0c;并通过一个示例来演示如何使用 PID 控制算法来调整系统的状态&#xff08;如温度、速度等&#xff09;。同时&#xff0c;我们也会解释每个控制参数如何影响系统的表现。 什么是 PID 控制器&#xf…

C语言数组详解:从基础到进阶的全面解析

在C语言中&#xff0c;数组是一种基本的数据结构&#xff0c;用于存储多个相同类型的数据。数组的引入使得C语言能够高效地存储和操作大量数据。在任何一个C语言程序中&#xff0c;数组都发挥着极其重要的作用。无论是在算法实现、数据存储、还是在复杂程序的设计中&#xff0c…

vulfocus/fastjson-cnvd_2017_02833复现

漏洞概述 Fastjson 是阿里巴巴开发的一个高性能的 Java 库&#xff0c;用于将 Java 对象转换成 JSON 格式&#xff08;序列化&#xff09;&#xff0c;以及将 JSON 字符串转换回 Java 对象&#xff08;反序列化&#xff09;。 fastjson在解析json的过程中,支持使用type字段来指…

【unity游戏开发之InputSystem——05】PlayerInput组件的介绍(基于unity6开发介绍)

文章目录 前言一、认识PlayerInput1、PlayerInput是什么?2、主要工作原理:3、好处:二、添加PlayerInput组件三、PlayerInput参数相关1、Actions:行为2、Default Scheme:默认启用哪个控制方案3、Auto-Switch:自动切换控制方案4、Default Map:默认行为映射方案5、Ui Input…

Android GLSurfaceView 覆盖其它控件问题 (RK平台)

平台 涉及主控: RK3566 Android: 11/13 问题 在使用GLSurfaceView播放视频的过程中, 增加了一个播放控制面板, 覆盖在视频上方. 默认隐藏setVisibility(View.INVISIBLE);点击屏幕再显示出来. 然而, 在RK3566上这个简单的功能却无法正常工作. 通过缩小视频窗口可以看到, 实际…

【2024 - 年终总结】叶子增长,期待花开

写在前面&#xff1a;本博客仅作记录学习之用&#xff0c;部分图片来自网络&#xff0c;如需引用请注明出处&#xff0c;同时如有侵犯您的权益&#xff0c;请联系删除&#xff01; 文章目录 前言论博客创作保持2024的记录清单博客科研开源工作生活 总结与展望互动致谢参考 前言…

TangoFlux 本地部署实用教程:开启无限音频创意脑洞

一、介绍 TangoFlux是通过流匹配和 Clap-Ranked 首选项优化&#xff0c;实现超快速、忠实的文本到音频生成的模型。 本模型由 Stability AI 提供支持&#x1f680; TangoFlux 可以在单个 A40 GPU 上在 ~3 秒内生成长达 34.1kHz 的立体声音频。 二、部署 安装方式非常简单 1…

ThreeJS示例教程200+【目录】

Three.js 是一个强大的 JavaScript 库,旨在简化在网页上创建和展示3D图形的过程。它基于 WebGL 技术,但提供了比直接使用 WebGL 更易于使用的API,使得开发者无需深入了解 WebGL 的复杂细节就能创建出高质量的3D内容。 由于目前内容还不多,下面的内容暂时做一个占位。 文章目…

AIGC的企业级解决方案架构及成本效益分析

AIGC的企业级解决方案架构及成本效益分析 一,企业级解决方案架构 AIGC(人工智能生成内容)的企业级解决方案架构是一个多层次、多维度的复杂系统,旨在帮助企业实现智能化转型和业务创新。以下是总结的企业级AIGC解决方案架构的主要组成部分: 1. 技术架构 企业级AIGC解决方…

Blazo-Blazor Web App项目结构

让我们还是从创建项目开始&#xff0c;来一起了解下Blazor Web App的项目情况 创建项目 呈现方式 这里我们可以看到需要选择项目的呈现方式&#xff0c;有以上四种呈现方式 ● WebAssembly ● Server ● Auto(Server and WebAssembly) ● None 纯静态界面静态SSR呈现方式 WebAs…

我谈概率论与数理统计的知识体系

学习概率统计二十多年后&#xff0c;在廖老师的指导下&#xff0c;厘清了各章之间的关系。本来就是一条线两个分支&#xff0c;脉络很清晰。 分支一&#xff1a;从随机现象到样本空间到随机事件再到概率。 从随机事件到随机变量&#xff1a;为了进行定量的数学处理&#xff0…

检查w-form-select 组件是否正确透传了 visible-change 事件

文章目录 1. 下拉框的组件2. 点击下拉框时的逻辑&#xff08;1&#xff09;handleVisibleChange 方法&#xff08;2&#xff09;getIdentifies 方法 3. 选择关联识别点时的逻辑&#xff08;1&#xff09;onRelatedChange 方法 4. 相关 UI 更新5. 总结 在这段代码中&#xff0c;…

校验收货地址是否超出配送范围实战3(day09)

优化用户下单功能&#xff0c;加入校验逻辑&#xff0c;如果用户的收货地址距离商家门店超出配送范围&#xff08;配送范围为5公里内&#xff09;&#xff0c;则下单失败。 提示&#xff1a; ​ 1. 基于百度地图开放平台实现&#xff08;https://lbsyun.baidu.com/&#xff09…

Linux应用编程(五)USB应用开发-libusb库

一、基础知识 1. USB接口是什么&#xff1f; USB接口&#xff08;Universal Serial Bus&#xff09;是一种通用串行总线&#xff0c;广泛使用的接口标准&#xff0c;主要用于连接计算机与外围设备&#xff08;如键盘、鼠标、打印机、存储设备等&#xff09;之间的数据传输和电…

【优选算法】7----三数之和

来了来了&#xff0c;他来了&#xff0c;又是学习算法的一天~ 今天的嘉宾是中等难度的算法题----三数之和&#xff01; ------------------------------------------begin------------------------------------ 题目解析&#xff1a; 哇趣&#xff01;又是给了一个数组&#…

深度学习|表示学习|卷积神经网络|参数共享是什么?|07

如是我闻&#xff1a; Parameter Sharing&#xff08;参数共享&#xff09;是卷积神经网络&#xff08;CNN&#xff09;的一个重要特性&#xff0c;帮助它高效地处理数据。参数共享的本质就是参数“本来也没有变过”。换句话说&#xff0c;在卷积层中&#xff0c;卷积核的参数&…