使用Hexo+github+netlify快速搭建个人博客网站

article/2025/11/4 8:19:00

1 写在开头

  倒腾了好几天,算是做出了一个有点样子的个人博客网站。便学各位大佬也写一个搭建教程,总结一下个人踩坑经验,也希望能对他人略有作用。
博客演示(欢迎来留言交流)

  • 为什么选择Hexo?答:简单快捷,前辈众多。
  • 面向:本文面向使用 windows 系统,不懂编程的新手小伙伴。
  • 教程内容随意复制使用,引用望加链接
  • 博客内容除个人信息外都放在 github 上,您只需要 fork 过去。当然github上有不少大佬的网站模板,可以自行选用一个。
  • 本博客实现了原主题的一些美化、创建相册并可选择加密相册、添加个人简历界面等,在后续文章中对Hexo主题Latex公式不正常显示(使用Katex放弃mathjax)、mermaid使用等常用定制操作给出了方案或者贴出了原文链接。
  • 如果对本文内容不易接受,推荐参考下面几篇博客来搭建个人网站:
    Hexo+Github 博客搭建完全教程
    Hexo + Github 搭建博客

2 对所使用的一些名词给出解释

  您可以直接跳过本部分,但对之后内容的理解可能会较为晦涩。
  不建议您点击下文给出的链接深入学习,这会耗费大量的时间。这些链接为了内容的完整性而添加的,链接地址基本都指向中文官方文档,如果只需要搭建博客网站您不必理会。

2.1 git

  目前世界上最先进的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。您只需要使用几个简单的指令来完成博客网站的搭建更新。深入了解点击这里。这里是廖雪峰老师的 git 教程。

2.2 github

  使用 git 来管理的网上仓库。想深入了解可以点击这里

2.3 githubpage

  对于一个放置在 github 上的仓库,可以开启 githubpage 来获得一个展示本仓库的网址。网页内容优先识别一级目录的 index.html,如果没有 index.html 则识别 index.md。当然一个 html 或 md 文件无法构成一个网站,因此 githubpage 可以选择读取一级目录 docs 来展示仓库内容(但需要你在本地部署一下,否则不能正常 deploy,因此 githubpage 并不适合本教程。本文使用的 netlify 则是自动部署),这样 html、css、js 等文件就可以构成一个静态网站。
  网上很多教程都使用了 githubpage,这也是最简单快速的方式。然而本人使用过程很不愉快,因此推荐大家使用 netlify来部署得到一个自己的网址。

2.4 静态网站

  所有数据都预先部署完毕的网站。内容相对稳定,没有数据库的支持。对于个人博客网站来说无需数据库支持,直接将网站数据放置在 github 网站即可。此外静态网站有容易被搜索引擎收录等优势,因此现在广泛流行的动态网站有向静态网站转化的趋势。我们常见的网址上面都带有问号,这可以视为动态网站的标志。

2.5 npm 和 yarn

  两者都是强大的包管理器。
  npm 是世界上最流行的包管理器。你可以使用npm来安装依赖包。如果决定使用 npm,后文你将会使用 npm 的简单命令来安装依赖包。使用安装依赖包会产生一个 package-lock.json 文件,这是 npm5 用于版本控制而引入的(在 npm5 之前 yarn 在版本控制和速度方面大占上风),如今 npm 的版本已经到达了 v7,因此不必担心 npm 会比 yarn 逊色。深入了解点击这里
  yarn 也是一个相当强大的包管理器,你可以选择yarn来安装依赖包。相比 npm,yarn 的语法更简洁,由于 yarn 本身是为了弥补 npm 的不足而问世的,因此在 npm5 之前 yarn 相较 npm 优势较大,但 npmv5 问世后优势已经大幅缩小。如今 npm 的版本已经到达了 v7,因此使用 npm 还是 yarn 取决于你自己。使用 yarn 安装依赖包会产生一个 yarn.lock 文件,这是 yarn 的版本控制文件。深入了解 yarn 点击这里。

2.6 nodejs

  JavaScript 环境。由于现在的npm集成在 nodejs 里,下载 nodejs 即可使用 npm 命令。深入了解点击这里和这里,后者是知乎用户对 nodejs 介绍的翻译。

2.7 Hexo

  Hexo 是一个基于 Node.js 的快速、简单且强大的静态网站框架。Hexo 使用 Markdown(或其他标记语言)解析您的文章,能在短短几秒内通过预定义的主题生成静态框架。深入了解点击这里

2.8 包(package)(或称模块(module))

  代码通过包来共享,一个包里包含所有需要共享的代码,以及描述包信息的文件,称为 package.json。通过包管理器您可以使用全世界开发者的代码,或者分享自己的代码。

3 迅速得到自己的网站

不同于一般教程先在本地安装各种库,本文首先给出生成网页的部分。具体步骤为:

3.1 copy 模板并部署你的网站

  直接将我的模板fork 到自己的 github 账号中。如果还没有 github 账号百度注册,然后点击本博客模板,进入页面后点击右上角 fork(类似于复制到自己的网上仓库)。

3.2 使用 Netlify 生成网站

  Netlify是一个提供静态资源网络托管的综合平台,提供 CI 服务,能够将托管 GitHub,GitLab 等网站上的 Jekyll,Hexo,Hugo 等代码自动编译并生成静态网站。
  构建个人网站只需要使用其免费功能即可获得良好的体验。

  1. 注册Netlify并登录
  2. 创建 site
  3. 选择 github 为存放网站数据的 git provider。
  4. 选择存放网站数据的 github 库
  5. 选择构建分支、构建命令和静态文件目录,点击 Deploy site 发布。如果是直接 fork 过去则直接 deploy 即可。
    如果您没有特殊需求,直接按照默认选项即可。
  6. 大约半分钟之内构建完成,得到自己的网址。

3.3 绑定自己的域名

  使用netlify得到的网址冗长无意义,可以申请一个自己的域名。可以去阿里云腾讯云等,普通后缀的域名第一年八块。也有免费的域名申请,但是需要梯子而且个人经验不容易成功,即便成功也不好用。操作可以参考本文的后续篇Hexo主题定制。

4 本地管理自己的网站

  首先来分析一下 fork 到自己仓库的内容。

  • scaffolds:Hexo 的模板文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。Hexo 的模板是指在新建的文章文件中默认填充的内容。例如,如果您修改 scaffold/post.md 中的 Front-matter 内容,那么每次新建一篇文章时都会包含这个修改。
  • source:资源文件夹是存放用户资源的地方。除_posts 文件夹之外,开头命名为_ (下划线)的文件、文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
  • source/_posts 文件夹:存放博客内容的地方
  • themes:主题 文件夹。Hexo 会根据主题来生成静态页面。
  • _config.yml:网站的 配置 信息,您可以在此配置大部分的参数。
  • package.json:应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装,您可以自由移除。
      我们使用了 netlify 使用 hexo 方式来部署网站,因此您只需要添加修改\source_posts 文件夹中的 markdown 文件就可以完成一些博客文章的添加修改。但更多对于网站的修改仍然需要本地操作。

4.1 需要进行的安装

安装 git(管理网上仓库),nodejs(生成 JavaScript 环境来使用 hexo 框架),hexo(本文使用的博客框架)

1-4可以参考hexo 官方文档来完成。

  1. 安装 git:为了管理远程仓库,需要用到 git。点击这里下载。安装后打开 cmd 输入git --version来检查是否安装成功。
  2. 安装 nodejs:Hexo 是基于 node.js 编写的,此外 nodejs 现在自带包管理工具 npm。点击这里下载,选择任意一个版本安装,安装选项默认即可。安装后打开 cmd 输入node --versionnpm --version来检查是否安装成功。
  3. 如果 cmd 中没有反应,可能是环境变量没有设置正确。设置一下环境变量
  4. 安装 Hexo:随意选择一个空文件夹鼠标右键选择git bash here输入npm install -g hexo-cli。安装完后打开 cmd 输入hexo --version来查看是否安装成功。对于熟悉 npm 的进阶玩家,可以仅局部安装 hexo 包。

如果您想使用 yarn 来安装依赖,您需要先安装 yarn,点击here安装 yarn。

4.2 远程仓库连接本地

现在我们已经安装了 git,首先将 github 和本地关联起来。

  1. 设置全局信息

    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
    
  2. 创建密钥
      在git bash(或 cmd)中输入ssh-keygen -t rsa -C "youremail"一路回车直到出现cat ~/.ssh/id_rsa.pub,这说明密钥已经生成。密钥存放在个人的主文件夹下,一般来说是C:\Users\PC\.ssh

  3. 将公钥放入 github
      打开 github,在头像下面点击 settings,再点击 SSH and GPG keys,新建一个 SSH,名字随便取一个都可以,把你的 id_rsa.pub 里面的信息复制进去。如图:

      在 cmd 或者git bash输入ssh -T git@github.com来查看是否成功。第一次输入会出现警告信息,忽略即可。

  4. 将远程仓库 clone 到本地。先找到自己的SSH key如下图

      使用 https 也可以但没有 ssh 速度快。找到SSH key后输入git clone your_SSH_key即可将远程仓库 clone 到本地。

4.3 本地写文章、发布文章

强推 vscode来配合 git 使用。如果还不会使用 vscode 建议您安装学习一下,下面的命令都可以在 vscode 中完成。vscode 提供了丰富的扩展支持不同的语言,vscode 对 git 来说十分友好,您可以在 vscode 的左侧用鼠标点击的方式完成git add系列操作, git commit系列操作, git push系列操作等常用命令。当然命令行输入命令可能更加显得更加专业。

  1. 首先要将相关模块安装到本地。打开git bash输入npm install,这个命令默认安装 package.json 中的所有模块。(如果选择了 yarn,命令是yarn。没错,yarn 的语法更加简洁!)
  2. 安装hexo-deployer-git
      在博客根目录(即 clone 到本地文件夹的一级目录)安装一个依赖npm i hexo-deployer-git(yarn 的命令是yarn add hexo-deployer-git
  3. git bash输入hexo new post "article title"来新建一篇文章(其实直接在\source_posts 文件夹新建一个 markdown 文件即可。将你的博客内容写入 markdown 文件即可。
  4. 在修改了本地内容后,需要将修改的内容提交并 push 到远程仓库。
    git bash输入git add .会将当前 git 控制的文件夹的所有修改提交到缓存区。
    git bash输入git commit -m "修改说明"会提交所有的修改
    git bash输入git push origin master"会提交将所有的修改同步到远程仓库。

5 个人定制

  包括相册、网站特效、域名使用等内容,具体见本博客网站的Hexo主题定制,会不断保持更新。如果有需求请评论留言(去留言板留言)

  生活愉快,不断进步~~~


http://chatgpt.dhexx.cn/article/xs3jGH9F.shtml

相关文章

使用 netlify 部署你的前端应用

我前几天写了一篇文章, 如果你想搭建一个博客 ,其中提到了使用 netlify 做博客托管服务。 netlify 可以为你的静态资源做托管,就是说它可以托管你的前端应用,就像 github page 那样。不过,它不又只像 github page 那么…

netlify国内快吗

Netlify国内快吗? Netlify vs 21云盒子 Netlify 是一家提供 JamStack(静态网站)托管的平台,支持自动从Github等仓库拉取代码, 按自定义构建方式进行构建,最后把生成的静态网站进行发布; 在这基础上同时也支持自定义域名,自动申请SSL证书等…

Netlify前端自动化部署工具

一、使用github或者gitlab登陆netlify 首先,打开netlify网站(https://app.netlify.com/) 然后使用github或者gitlab账号登录。 二、根据github/gitlab仓库创建网站 点击New site from Git按钮: 根据你的仓库所在平台选择,以下三选一&#x…

使用netlify实现自动化部署前端项目(无服务器版本)

介绍 本文以 github仓库进行介绍关联netlify的无服务前端自动化部署。用途:个人网站设计、小游戏等当然这只是让你入门~具体细节等待你自己去探索 实现 打开官方网站 如果没有注册过的账户,你需要使用 github 去进行登录。注册完成后会自动给你提示填…

Netlify静态资源托管之部署自动化

关注「WeiyiGeek」公众号 将我设为「特别关注」,每天带你玩转网络安全运维、应用开发、物联网IOT学习! 0x00 基础介绍 0x01 Netlify 使用 0x00 基础介绍 Q: Netlify 是什么? Netlify 是一个提供静态资源网络托管的综合平台,一个直观的基于…

如何使用netlify部署vue应用程序

什么是Netlify? Netlify是一个现代网站自动化系统,其JAM架构代表了现代网站的发展趋势。所谓JAM,就是指基于客户端JavaScript、可重用API和预构建Markup标记语言的三者结合。 有了Netlify,我们只要在本机Git中写前端代码&#xff…

C语言:strlen() --- 计算字符串长度

C语言 基础开发----目录 一、strlen() 简介 1. 函数原型 unsigned int strlen(char *str);2. 参数 str - - 要计算长度字符串的地址指针 3. 功能 计算给定字符串的字节长度&#xff0c;直到空字符结束&#xff0c;但不包括空字符。 4. 头文件 #include <string.h>…

C语言 计算字符串的长度

方法一&#xff1a; #include<stdio.h> int length(char *s){char *ps;while(*p!\0){ //等同于 *pp;}return p-s; } void main(){char s[32];printf("请输入一个字符串&#xff1a;");scanf("%s",&s);printf("长度为&#xff1a;%d",l…

计算字符串长度的五种方法

方法一&#xff1b; ------------------------------------------------------------ 方法二; ------------------------------------------------------------ 方法三&#xff1b; ------------------------------------------------------------ 方法四利用sizeof()&#x…

计算字符串长度

用三种方法计算字符串的长度&#xff1a; 字符串&#xff1a;“abcd”&#xff0c;在储存的时候&#xff0c;字符串的最后一位会以一个终止符 \0&#xff0c;所以求取的就是终止符前的字符数。 1.计数器方式 通过设置一个计数器&#xff0c;然后用指针字符串从头扫描&#xf…

计算字符串长度的三种方法(库函数 指针 )【详解】

目录 求字符串长度的一般原理方法一&#xff1a;strlen函数函数原型使用方法 方法二:指针整数方法三&#xff1a;指针-指针总结&#xff1a; 求字符串长度的一般原理 求字符串长度简单来说就是计算一个字符串(字符数组)中元素的个数即从数组头部计数&#xff0c;直到遇到字符串…

微信小程序怎么开发(小程序开发文档)

微信小程序是一种全新的连接用户与服务的方式&#xff0c;它可以在微信内被便捷地获取和传播&#xff0c;同时具有出色的使用体验。 2017年1月9日~2018年1月9日&#xff0c;小程序正式上线一周年。上线以来&#xff0c;小程序不断地释放新能力&#xff0c;迭代更新&#xff0c;…

【小程序】一文带你了解微信小程序开发(小程序注册/开发工具的下载)

&#x1f41a;作者简介&#xff1a;苏凉&#xff08;专注于网络爬虫&#xff0c;数据分析&#xff0c;正在学习前端的路上&#xff09; &#x1f433;博客主页&#xff1a;苏凉.py的博客 &#x1f310;系列专栏&#xff1a;小程序开发基础教程 &#x1f451;名言警句&#xff1…

小程序设计文档

状态码介绍 {status: 状态码msg: 消息data: 响应数据 }code解释0success1error10need_login2illegal_argument 介绍 用到的接口 小程序登陆能获取的信息有 wx.request的返回为 data里面包的是后端服务器返回的值 小程序登陆时序图 登陆流程 微信小程序wx.login()拿到…

微信小程序技术文档

1.只显示用户头像和名称&#xff08;简化代码&#xff09; <!-- 如果只是展示用户头像昵称&#xff0c;可以使用 <open-data /> 组件 --> <open-data type"userAvatarUrl"></open-data> <open-data type"userNickName"><…

微信小程序开发者文档 开放文档 地址

最好的微信小程序开发参考书籍——微信小程序开发者文档 开放文档 微信小程序开发者文档地址 &#x1f9e9;微信官方文档&#xff1a;https://developers.weixin.qq.com/doc

微信小程序(原生):基本开发相关文档

1、微信公众平台&#xff08;后台登录页&#xff09;&#xff1a; https://mp.weixin.qq.com/ 2、微信小程序官网文档&#xff08;组件api等&#xff09;&#xff1a; https://developers.weixin.qq.com/miniprogram/dev/component/audio.html 3、微信开放社区&#xff08;问题…

【微信小程序】(一)开发工具下载与界面介绍

本系列文章主要介绍微信小程序基本的开发流程与基础内容 文章目录 前言 一、安装微信开发者工具 二、开发者工具基本介绍 1.创建项目 2.界面展示 3.目录结构介绍 前言 微信小程序作为一种开发成本低&#xff0c;开发门槛低&#xff0c;周期更短等优势&#xff0c;依托微信生态…

微信小程序入门文档

小程序入门文档 微信小程序介绍 微信小程序&#xff0c;简称小程序&#xff0c;英文名Mini Program&#xff0c;是一种不需要下载安装即可使用的应用&#xff0c;它实现了应用“触手可及”的梦想&#xff0c;用户扫一扫或搜一下即可打开应用。 小程序官方文档地址&#xff1a…

微信小程序开发之官方文档学习(一)

小程序宿主环境 渲染层和逻辑层 小程序的运行环境分成渲染层和逻辑层&#xff1a;WXML 模板和 WXSS 样式工作在渲染层&#xff0c;JS 脚本工作在逻辑层。渲染层和数据相关&#xff1b;逻辑层负责产生、处理数据&#xff0c;通过 Page 实例的 data 属性传递数据到渲染层。 通信模…