hexo的基础搭建

无标题

前提

        你需要有一定的技术能力。
准备工作
GitHub帐号:确保您拥有GitHub帐号。如果没有,请在GitHub上注册一个。
Git:安装Git版本控制工具,以便将博客的源代码上传到GitHub。
Node.js:安装Node.js,因为Hexo是基于Node.js构建的。
WSL 2(或者是windonw,或者是Linux):在WSL 2中,您需要安装Node.js和Git。在WSL 2的终端中,运行以下命令:

创建创库

创建2个仓库

  1. 一个放博客(这个设置为共有), 假如你的github地址是https://github.com/zhangwuji, 那么这个仓库的名字就是zhangwuji.github.io 

    ![](6e7e20e5-66eb-49fe-8bd4-86a92c1875f6.png)

  2. 一个放hexo程序(这个要设置为私有),仓库名字谁便,只要是私有的就可以 

    ![](f2955968-7851-4e2c-98dd-b2d2b749848d.png)


    这个主要是实现用 github私有仓库保存 hexo 源码,并通过 actions 发布到公共仓库的 gitpage https://blog.actpi.com/articles/2023/git-action-blog.html

安装Hexo

Hexo 是一个基于NodeJS的静态博客网站生成器,可以把markdown文件生成html文件。


安装主题

Hexo 默认的主题不太好看,不过官方提供了数百种主题供用户选择,可以根据个人喜好更换,官网主题 查看。这里选择灵活随便的Fluid主题。

安装Fluid主题
具体安装方式可以参考Fluid官网,这里需要选择方式二安装,为了之后的修改。
下载 最新 release 版本 解压到 themes 目录,并将解压出的文件夹重命名为 fluid。


指定主题
如下修改 Hexo 博客根目录中的 _config.yml文件


创建页

创建「关于页」
首次使用主题的「关于页」需要手动创建:
创建成功后,编辑博客目录下 /source/about/index.md,添加 layout: about 属性(冒号后面有空格的,直接CV大法)。


这里不演示效果,笑死了,难道要执行一步看一步?搁这里浪费生命呢,一步到胃他不香吗。

创建「社群」
这个页面是fluid 主题没有的,这里主要是演示要怎么添加导航菜单。先上效果。


具体操作:
1. 创建社群页

2. 把\themes\fluid_config.yml 文件复制出来放在根目录,命名为_config.fluid.yml


3. 修改_config.fluid.yml 导航栏菜单配置(添加一行):


4.  修改themes\fluid\languages\zh-CN.yml文件,增加语言对应中文


5. 本地启动,看效果。
浏览器访问 http://localhost:4000


创建文章

1. 修改根目录_config.yml,打开post_asset_folder配置,是为了在生成文章的时候生成一个同名的资源目录用于存放图片文件。

2. 执行如下命令创建一篇新文章,名为《iPhone双开》

3. 执行完成后在source_posts目录下生成了一个md文件和一个同名的资源目录(用于存放图片)


4. 编辑 iPhone双开.md,注意引入图片方式。
当然啦还有md的写法,可以参考

5. 启动查看效果。





本文链接: hexo的基础搭建  https://aikunzhe.github.io/p/hexo/1699466263264.html
版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!