在github使用hexo搭建静态博客

川长思鸟来 2023-03-13 05:47 63阅读 0赞

> 效果：[https://trevor-lan.github.io/][https_trevor-lan.github.io]

## 安装前提 ##

安装 Hexo 之前需要先安装下列应用程序：

*  [Node.js][] (Node.js 版本需不低于 8.10，建议使用 Node.js 10.0 及以上版本)
 *  [Git][]

## 安装hexo ##

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

npm install -g hexo-cli

## 使用hexo ##

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

npx hexo init <folder>

新建完成后，指定文件夹的目录如下

.
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    └── themes

**安装github自动提交工具**

npm install hexo-deployer-git --save

**配置秘钥访问github**

ssh-keygen -t rsa -C "your_email@youremail.com"

> 直接按三次回车，可不用输入密码 然后打开C盘查找Users/当前用户目录(Administrator),找到.ssh文件夹 打开文件夹下的id\_rsa.pub文件，将里面文字全部复制， 打开github个人主页 (https://github.com/settings/ssh) ,点击 Add SSH Key 按钮，粘贴进去保存即可

**在github配置访问公钥 **

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70 2][]

**新建文章**

hexo new [layout] <title>

**生成静态文件**

npx hexo g

**启动服务**

npx hexo s

**部署到github**

npx hexo d

**清除缓存**

npx hexo clean

> hexo官方文档：[https://hexo.io/zh-cn/docs][https_hexo.io_zh-cn_docs]

--------------------

## 配置主题 ##

> hexo官网有许多主题可以选择，这里笔者使用的是next主题

> next主题：[https://theme-next.org/][https_theme-next.org]
> 
> 使用的版本为：[https://github.com/theme-next/hexo-theme-next][https_github.com_theme-next_hexo-theme-next]

** 安装next主题**

git clone https://github.com/theme-next/hexo-theme-next themes/next

** 配置hexo的主题为next**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70 3][]

> \# Extensions  
> \#\# Plugins: https://hexo.io/plugins/  
> \#\# Themes: https://hexo.io/themes/  
> theme: next

--------------------

## next的常用配置 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70 4][]

** 菜单配置**

![20200519135623930.png][]

> scheme: Mist

> menu:  
>   home: / || fa fa-home  
>   about: /about/ || fa fa-user  
>   tags: /tags/ || fa fa-tags  
>   categories: /categories/ || fa fa-th  
>   archives: /archives/ || fa fa-archive  
>   schedule: /schedule/ || fa fa-calendar  
>   sitemap: /sitemap.xml || fa fa-sitemap

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70 5][]

--------------------

** 侧边栏配置**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70 6][]

侧边栏定位

> sidebar:  
>   \# Sidebar Position.  
>   \#position: left  
>   position: right

头像

> avatar:  
>   \# Replace the default image and set the url here.  
>   url: https://avatar.csdnimg.cn/9/A/7/1\_lwqbrell\_1572140047.jpg  
>   \# If true, the avatar will be dispalyed in circle.  
>   rounded: true  
>   \# If true, the avatar will be rotated with the cursor.  
>   rotated: true 
> 
>

社交

> social:  
>   GitHub: https://github.com/yourname || fab fa-github  
>   E-Mail: mailto:yourname@gmail.com || fa fa-envelope  
>   Weibo: https://weibo.com/yourname || fab fa-weibo  
>   Google: https://plus.google.com/yourname || fab fa-google  
>   Twitter: https://twitter.com/yourname || fab fa-twitter  
>   FB Page: https://www.facebook.com/yourname || fab fa-facebook  
>   StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow  
>   YouTube: https://youtube.com/yourname || fab fa-youtube  
>   Instagram: https://instagram.com/yourname || fab fa-instagram  
>   Skype: skype:yourname?call|chat || fab fa-skype

外链

> links:  
>   Title: http://yoursite.com

图片预览

> \# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.  
> \# For more information: https://fancyapps.com/fancybox  
> fancybox: true

一键复制代码

> codeblock:  
>   \# Manual define the border radius in codeblock  
>   \# Leave it empty for the default 1  
>   border\_radius:  
>   \# Add copy button on codeblock  
>   copy\_button:  
>     enable: true  
>     \# Show text copy result  
>     show\_result: true

[https_trevor-lan.github.io]: https://trevor-lan.github.io/
[Node.js]: http://nodejs.org/
[Git]: http://git-scm.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70]: /images/20230312/c8e36cf4232e49f48d454e5cfc12c663.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70 1]: /images/20230312/975b9ff2dab840b49c3053527f968742.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70 2]: /images/20230312/534a2d6b527e4ea5b3e54200664c4041.png
[https_hexo.io_zh-cn_docs]: https://hexo.io/zh-cn/docs/
[https_theme-next.org]: https://theme-next.org/
[https_github.com_theme-next_hexo-theme-next]: https://github.com/theme-next/hexo-theme-next
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70 3]: /images/20230312/628ae1058e984a8b8d363c3883a3d6f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70 4]: /images/20230312/bb237ef1b60b4ea1a6159a8297069cbc.png
[20200519135623930.png]: /images/20230312/81c5e29320394607a0665a51ebcf84f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70 5]: /images/20230312/5756d685444f4ccb9aba2aff0790a180.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70 6]: /images/20230312/8496d152222a49fd88f9e4cbdf8c56c1.png