头图

30分钟,hexo+github快速搭建博客

前言

有些同学可能觉得搭建博客是一件麻烦的事,既需要购买注册域名,又要购买配置服务器,还需要花成本去维护它们。没关系,即使这些你都没有,照样可以搭建自己的博客。你只需要准备一个github账号。

本文概览如下:

好了,现在我们正式使用hexo开始搭建博客吧~

搭建博客

安装hexo

npm install -g hexo-cli

初始化项目

现在我们已经安装完成hexo了。接下来使用hexo初始化博客项目。

// 初始化生成blog项目
hexo init blog

配置主题

hexo默认的主题是_landscape,现在我们将主题配置为 keep。_

// 确认目录是否切换到了blog中,如果没有,则将目录切换到blog中
cd blog

// 安装keep主题
npm install hexo-theme-keep

// 修改_config.yml配置文件
theme: keep

// 预览网站
hexo server

在浏览器中打开http://localhost:4000,如图
image.png

添加文章

新建

现在,让我们新建一篇博客

// 在blog项目中,执行如下命令:新建文章
hexo new post 今日菜谱

如图如示,新建的这篇博客以markdown的格式形式存储在了blog/source/_posts目录下。
image.png

编辑

添加正文

现在我们打开【今日菜谱.md】,写下我们的今日菜谱。
image.png

然后保存。刷新http://localhost:4000该链接。便可以看到看到我们刚刚更新的最新文章了。如图

添加分类和标签

接着我们为文章添加分类和标签:打开【今日菜谱.md】,修改如下
image.png
然后,打开终端分别执行如下命令。

hexo new page categories
hexo new page tags

如下所示,hexo会在souce目录下,创建一个categories和tags文件夹,里面都包含一个index.md文件。
image.png
image.png
现在我们在浏览器中分别访问如下地址,便可以分别看到我们添加的分类和标签了。点击【美食】分类和【菜谱】标签便可以看到属于它们的文章。
http://localhost:4000/categories/
image.png

http://localhost:4000/tags/
image.png

为了能在主页直接访问标签和分类,我们可以对node_moduels/hexo-theme-keep/_config.yml配置文件做如下修改:
image.png
再次刷新http://localhost:4000,如图
image.png

发布草稿

如果你暂时还不想要文章被公开访问,可以先创建草稿。如下

hexo new draft 今日随想

image.png
刷新http://localhost:4000暂时还无法访问我们新创建的这篇文章,如果想要访问这篇文章,我们则需要发布该文章,执行如下命令

// 发布草稿
hexo publish draft 今日随想

现在这篇文章从_draft目录移动到了_post目录。
image.png
接着,我们再刷新http://localhost:4000,便可以看到这篇文章了
image.png

部署博客

现在我们使用github page来部署我们的博客。首先你需要有一个github账号,如果没有则需要先去注册一个。

新建仓库

1.我们打开 github,然后点击New repository按钮,如图
image.png

2.创建一个名为username .github.io的存储库,其中username是你在GitHub上的用户名
image.png
3.成功创建长仓库后,复制仓库的https地址,如图
image.png

部署

// 确认目录是否切换到了blog中,如果没有,则将目录切换到blog中
cd blog

// 安装部署插件
npm install hexo-deployer-git --save

// 修改_config.yml配置文件
// 将复制的地址,黏贴到如下repo字段中
deploy:
    type: git
  repo: https://github.com/one-cheese/one-cheese.github.io.git
    branch: master
 
// 部署网站到创建的仓库
hexo deploy

部署完成后,我们刷新one-cheese.github.io仓库,本地生成的public中的静态资源全都上传到了该仓库中,如图。
image.png
现在,访问github page地址one-cheese.github.io,便可以看到部署成功的博客了。

2.3k 声望
137 粉丝
0 条评论
推荐阅读
One 一个简洁的博客、微博客系统
代码:[链接]文档:[链接]系统预览首页:微博列表:微博详细:文章列表:文章详细:归档:搜索,目前只能依据分类、标签搜索😀:管理后台:

Eyeswap45阅读 2.3k评论 1

网站集合
以下整理了平常用到的一些网站,其实是看到收藏夹日渐庞大,强迫症又犯了= =,后面持续更新,如果有比较好用的网站或者有需要什么网站都欢迎留言~

Fw恶龙30阅读 12k评论 4

封面图
使用 github actions 实现 npm 包自动化发布
鉴于我发布/即将发布的 npm 包越来越多,我决定用 github 的 actions 功能来实现 npm 包自动发布,过程也比较顺利,遂决定写一篇流水账记录下自动发布的实现,方便以后用到的时候翻阅。

MrBigShot1阅读 2.3k

使用 github 和 Deno Deploy 搭建一个博客网站
这个可能是目前最简单的搭建博客网站的方式了。你只需要有一个github账号就行了。本博客一切从简,直接用github的在线编辑功能,不需要本地安装Nodejs/Deno、git客户端、然后再配置git的代理,配置代码仓库地址,...

Midqiu阅读 1.2k

白嫖GitHub Pages,个人网站搭建步骤详解!
Hexo 是一个快速、简单且功能强大的博客框架。使用 Markdown 解析文档,Hexo 能在几秒内生成带有自定义主题并集成各项功能的网站页面。

LigaAI阅读 467

封面图
ModStartBlog 现代化个人博客系统 (支持Laravel9)
ModStartBlog 是一个基于 Laravel 现代化个人博客系统。模块市场拥有丰富的功能应用,支持后台一键快速安装,让开发者能快的实现业务功能开发。

戴马师阅读 619

给你的hexo添加live2D看板娘
《Live2D》是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像,对于以动画风格为主的冒险游戏来说非常有用

遗失的美好灬阅读 465

2.3k 声望
137 粉丝
宣传栏