Loading... <div class="tip share">请注意,本文编写于 1155 天前,最后修改于 324 天前,其中某些信息可能已经过时。</div> <div class="tip inlineBlock warning simple"> 🤖 本博客内容使用 GPT-4 技术进行润色 </div> # 一、Hexo ## 1、关于Hexo **[Hexo](https://hexo.io/zh-cn/docs/)** 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。 ## 2、安装Hexo > 安装教程比较简单,可以参考官方文档进行安装:[https://hexo.io/zh-cn/docs/](https://hexo.io/zh-cn/docs/) 因为 Hexo 是基于 `Node.js` 的,所以需要先安装下列应用程序: * [Node.js](http://nodejs.org/) (`Node.js` 版本需不低于 `10.13`,建议使用 `Node.js 12.0` 及以上版本) * [Git](http://git-scm.com/)(根据系统版本自行下载安装) 安装后,我们可以通过简单的命令 `npm install -g hexo-cli` 来完成 Hexo 的安装。 ## 3、使用Hexo ### ① 初始化Hexo > 在你想要创建博客的文件夹打开 `cmd` 或者 `Git Bash`,也可以通过 `cd your_blog_path` 命令进入到博客创建的路径,通过命令 `hexo init` 进行项目初始化;也能通过命令 `hexo init your_blog_path` 直接将项目初始化到指定目录中。 ``` // 配置用户名和邮箱 $ git config --global user.name "your username" $ git config --global user.email "your email" // 项目的初始化 $ hexo init <folder> $ cd <folder> $ npm install ```  创建的博客项目文件夹的目录如下: ``` . ├── _config.yml // 网站的配置信息 ├── package.json // 应用程序的信息 ├── scaffolds // 模版文件夹 ├── source // 存放Markdown文件 | ├── _drafts // 存放Markdown草稿文件 | └── _posts // 存放Markdown博客文件 └── themes // 主题文件夹 ``` ### ② 创建文章页面 ``` $ hexo new "new article title" // 创建新文章 $ hexo new draft "new draft title" // 创建新草稿 $ hexo public post "draft title" // 发布草稿 $ hexo new page --path new/page "new page title" // 创建新页面 ```  创建的博客和草稿均可以在 `\your\blog\path\source\_posts\` 路径中看到,然后对 Markdown 文件进行编辑即可撰写自己的博客内容。 ### ③ 生成静态文件 ``` $ hexo generate // 生成静态文件 $ hexo g // 在没有其他 g 开头的命令时,可以命令简化 ``` 将所有博客的 Markdown 文件转化成静态 HTML 页面,同时打包其他页面的静态文件。  ### ④ 本地运行调试 ``` $ hexo server // 本地运行调试 $ hexo s // 在没有其他 s 开头的命令时,可以命令简化 ``` 本地运行 `node.js` 服务,在浏览器输入 `http://localhost:4000/` 即可查看博客样式。    ### ⑤ 清除缓存和静态文件 ``` $ hexo clean // 清除缓存文件和已生成的静态文件 ``` 由于 Hexo 是静态博客框架,所以博客内容更新后并无法实时更新内容,需要清除原先的缓存文件和静态文件重新生成,才能够更新页面中的内容。 ### ⑥ 更多命令 ``` $ hexo help INFO Validating config Usage: hexo <command> Commands: clean Remove generated files and cache. config Get or set configurations. deploy Deploy your website. generate Generate static files. help Get help on a command. init Create a new Hexo folder. list List the information of the site migrate Migrate your site from other system to Hexo. new Create a new post. publish Moves a draft post from _drafts to _posts folder. render Render files with renderer plugins. server Start the server. version Display version information. Global Options: --config Specify config file instead of using _config.yml --cwd Specify the CWD --debug Display all verbose messages in the terminal --draft Display draft posts --safe Disable all plugins and scripts --silent Hide output on console For more help, you can use 'hexo help [command]' for the detailed information or you can check the docs: http://hexo.io/docs/ ``` ## 4、配置Hexo 我们可以看到,博客中的作者个人信息并非自己的,我们可以修改 Hexo 根目录下的 `_config.yml` 文件来修改博客的作者信息,所有配置信息均显而易见,自行翻译即可。  # 二、Butterfly ## 1、关于Butterfly 默认的主题可能并不是我们想要的效果,那么就可以通过更换主题来实现自己满意度效果,我们可以在官网的 [主题页面](https://hexo.io/themes/) 选择想要的主题,也可以自己按照官方文档写一个主题🧐。 我个人审美选择的是 Butterfly 主题,Butterfly 主页的展示页面以及教程内容如下:[https://butterfly.js.org/](https://butterfly.js.org/)。大家也可以根据自己的爱好选择自己喜欢的主题,具体教程可以参照网络博客或者主题作者教程内容。 ## 2、安装并应用主题 ### ① 安装Butterfly 直接通过 `git clone` 拷贝 Butterfly 的 Git 仓库到本地即可,在 Blog 根目录下执行以下命令,如果 Github 访问较慢可以参考 [主题教程博客](https://butterfly.js.org/posts/21cfbf15/) 的其他地址,或者体验一下测试版。 ``` $ git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly ``` ### ② 应用Butterfly 修改 Hexo 根目录下的 `_config.yml` 文件,把主题修改为 `butterfly`。 ``` theme: butterfly ``` 应用 Butterfly 需要 `pug` 以及 `stylus` 的渲染器,如果没有下载这些插件,请使用以下命令进行安装: ``` $ npm install hexo-renderer-pug hexo-renderer-stylus --save ``` 清楚原先的缓存文件和静态文件,重新生成静态文件,本地运行可以得到如下页面(如果显示存在问题,可能是有些插件缺少导致的,自行查看日志信息,安装缺少的插件即可):  ## 3、配置Butterfly 此时的 Butterfly 并不是我们想要的样子,还有很多UI配置并不符合我们的要求,所以我们需要修改 `theme\butterfly` 路径下的 `_config.yml` 文件来修改博客主题配置。  > 具体配置自行先根据作者的 [教程](https://butterfly.js.org/) 自行了解吧,太久不用已经更新了很多新的功能。 # 三、Github Pages ## 1、关于Github Pages GitHub Pages 是 Github 提供给用户用来展示个人或者项目主页的静态网页系统,通过 Github 网站托管和发布的公开网页。一般多用于托管个人的静态网站,所以现在很多人也用来它来搭建私人博客,也算是省去了购买服务器、域名等等一系列复杂的操作。 > Github Pages 我个人觉得虽然是国外的服务器,但是访问起来并不算慢,如果觉得慢,可以考虑 CDN 加速、使用国内图床或者使用 Coding 提供的类似服务。 ## 2、创建Github Pages仓库 这个需要注册一个 Github 账号,然后点击 Github 右上角的 `+` 号 -> `new repository` 来创建一个新的仓库。需要注意下面两个红色框框,建议将第一个红框中的仓库名设置成以下格式:`username.github.io`,其中 `username` 请对应换成你的 Github 用户名;同时,第二个红框要将该仓库设置为公开可以访问。  ## 3、配置Git和SSH密钥 ``` // 配置Git的用户名和密码 $ git config --global user.name "your username" $ git config --global user.email "your email" // 生成公钥 $ ssh-keygen -t rsa -C "your email" ``` 如果第一次使用 `git` 需要设置用户名和邮箱,然后在 `cmd` 命令行或者 `git bash` 中执行上述命令生成公钥,如下图所示:  然后打开如图红框所示路径下的文件,即 `C:\Users\Kared\.ssh\id_rsa.pub`,复制文本中的所有内容。点击 Github 右上角的用户头像 -> `Settings` -> `SSH and GPG keys` -> `New SSH key` 来创建一个新的 `SSH Key`,其中 `Title` 可以随意填写(方便记忆哪一台设备的公钥即可),`Key` 需要填写刚才复制的公钥文本内容。  完成上述操作后,进入 `cmd` 或者 `Git Bash` 输入下面命令进行验证,获得成功回复即配置成功。 ``` $ ssh -T git@github.com ``` ## 4、上传到Github仓库 先修改 Hexo 根目录下的 `_config.yml` 文件来配置其中的 `repo` 信息,内容如下: ``` deploy: type: git repo: #你的仓库地址,如:https://github.com/xxx/xxx.github.io.git branch: master ``` Hexo 有对应的 Github 上传插件,当然你也可以直接使用 Git 在静态文件的文件夹直接上传,插件安装命令如下: ``` npm install hexo-deployer-git --save ``` 然后我们就可以通过命令 `hexo d` 直接上传静态文件到 Github 仓库中。每次更新依次执行下述命令即可: ``` $ hexo clean $ hexo g $ hexo d ``` 在 Github 中刷新对应的 `repository` 页面,即可看到提交的内容。在 `repository` 页面进入仓库的 `Settings` 先确认仓库名是否是 `username.github.io` ,然后下滑到 `GitHub Pages` 查看一下静态页面是否已经发布,复制对应的博客网址:`https://username.github.io` 即可查看自己的博客。 ## 5、Github Pages 更换自己的域名 只需要进入该仓库的设置,找到 `Settings -> Pages -> Custom domain` 并加入自己的域名保存即可。  我们已经将自定义域名放在 Github Pages 上了,然后,我们需要进行 DNS 解析此时。在本机命令行使用命令 `ping + username.github.io` (注意替换成自己的 `username`) 获取我们博客服务器的 IP 地址,并在域名注册商的平台上添加新的 `A记录` 解析到个人设置的域名。最后,稍微等待片刻,我们就可以使用自定义的域名访问博客了。 > **A 记录:** 最基本的记录类型,也称为地址记录,为域名或子域名提供 IPv4 地址。该记录将域名指向 IP 地址。 ## 其他相关 ### 博客图床 <div class="preview"> <div class="post-inser post box-shadow-wrap-normal"> <a href="https://www.huarzone.com/archives/19/" target="_blank" class="post_inser_a no-external-link no-underline-link"> <div class="inner-image bg" style="background-image: url(https://www.huarzone.com/usr/uploads/images/top-images/19-top.png);background-size: cover;"></div> <div class="inner-content" > <p class="inser-title">好用的图床上传工具 Picgo</p> <div class="inster-summary text-muted"> PicGo 是一款功能强大且界面友好的图片上传工具,支持 Mac 和 Windows 平台。您可以在 https:... </div> </div> </a> <!-- .inner-content #####--> </div> <!-- .post-inser ####--> </div> ### CDN 加速 当我们将GitHub用作图床时,我们可以免费使用 jsDelivr 的 CDN 加速服务。按照以下说明进行设置: ``` https://cdn.jsdelivr.net/gh/username/repository@version/filepath/filename ``` * 将 `username` 替换为你的 GitHub 用户名。 * 将 `repository` 替换为用于存储图片的 GitHub 仓库名。 * 将 `version` 替换为你想要加载的 GitHub 仓库分支版本。 * 将 `filepath` 替换为文件在仓库中的路径(可选)。 * 将 `filename` 替换为文件名。 > 请确保你的文件是公开可访问的,以便CDN能够正确加载它们。 通过按照这些说明设置 URL,你可以使用 jsDelivr 的 CDN 加速服务加载 GitHub 图床上的文件。这样做可以提高文件的加载速度和可靠性,同时减轻 GitHub 服务器的负载。 Last modification:March 29, 2024 © Allow specification reprint Support Appreciate the author AliPayWeChat Like 如果觉得我的文章对你有用,请随意赞赏