📣 用hexo搭建个人博客(持续更新中)

82 阅读3分钟

本文记录自己搭建个人博客的历程,欢迎收看~

📚 搭建基础的个人博客

前提:需安装了git 和 nodejs

  1. 安装hexo。先新建一个文件夹,在该文件夹下打开git bash,然后运行npm install -g hexo-cli

image.png

  1. 初始化hexo,命令为:hexo init ,出现下图结果就表示初始化成功!

image.png

新建完成后,在路径下,会产生一些文件和文件夹:

1693383850554.jpg

  • _config.yml:俗称站点配置文件,很多与博客网站的格式、内容相关的设置都需要在里面改。
  • node_modules:存储Hexo插件的文件,可以实现各种扩展功能。一般不需要管。
  • package.json:相关描述的,比如名字、版本。
  • scaffolds:模板文件夹,里面的post.md文件可以设置每一篇博客的模板。具体用起来就知道能干嘛了。
  • source:非常重要。所有的个人文件都在里面!
  • themes:主题文件夹,可以从Hexo主题官网或者网上大神的Github主页下载各种各样美观的主题,让自己的网站变得逼格高端的关键!
  1. 启动服务器

命令为:hexo server,或者简写:hexo s,然后打开浏览器,在地址栏输入:localhost:4000回车就可以得到如下结果:(ctrl+c可关闭服务)

image.png

至此,您的Hexo博客已经搭建在本地。

4.上传到github

在github创建仓库,仓库名为:<Github账号名称>.github.io(必须是这个,否则后续打不开)。安装hexo-deployer-git插件。在命令行(即Git Bash)运行以下命令即可(也可以走淘宝镜像,淘宝镜像就是换成cnpm):

npm install hexo-deployer-git --save

添加SSH key,如果已添加可以不用管。如果未添加,可以参考添加SSH key,我这里已经添加,接着下一步;

  1. 修改_config.yml(在站点目录下)。文件末尾修改为:
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:LuoyNothing/LuoyNothing.github.io.git
  branch: main

6.生成页面并上传到github

// 生成页面:
hexo g
// 上传到github: 
hexo d

执行完上面两个命令,并出现下图结果即表示上传成功。 image.png

至此,您的Hexo博客已经搭建在GitHub上,访问域名为:luoynothing.github.io/

image.png

访问博客,开始的页面是初始化页面,没有做美化和增加内容。

🌸 域名绑定

还未绑定

📚 文档学习

官网文档:文档 | Hexo

🌸 修改主题

我的博客修改的主题是fluid( Hexo Fluid 用户手册),github(fluid Hexo 主题),以下是详细步骤:

  1. 下载主题

方式一:推荐通过 npm 直接安装,进入博客目录执行命令:npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml,将主题的_config.yml内容复制过去。

方式二:下载 最新 release 版本解压到 themes 目录,并将解压出的文件夹重命名为 fluid

我采用的是方式二。

  1. 然后采用hexo三连,就可以在本地查看到主题修改
// 清除缓存文件 `db.json` 和已生成的静态文件 `public`。
hexo cl 
// 生成网站静态文件到默认设置的 `public` 文件夹。
hexo g
// 启动本地服务器,用于预览主题。
hexo s

下图表示换主题成功!然后可以用localhost:4000来访问个人博客

image.png

  1. 部署到github上:

hexo三连:

// 清除缓存文件 `db.json` 和已生成的静态文件 `public`。
hexo cl 
// 生成网站静态文件到默认设置的 `public` 文件夹。
hexo g
// 部署到远程仓库里
hexo d

,然后可以用luoynothing.github.io/ 来访问个人博客了。