Hexo搭建静态博客
入门操作学习
运行环境准备
安装Git
安装Node.js
安装Hexo
npm install -g hexo-cli
建站
hexo init <folder> #初始化存放博客文件的路径 cd <folder> npm install #安装npm hexo server #运行博客,这里操作完就能看到一个简易的博文了
安装过程中开启VPN能够加速安装过程
博文添加
手动添加
在./source/_posts文件夹下添加.md文件,格式如下:
--- title: Hello World // 文章标题 date: 2023-02-11 03:10:45 // 创建时间 tags: - hello1 - hello2 // 设置2个文章标签,数量自定义 categories: txt // 文章分类 index_img: // 首页文章的封面图 banner_img: // 文章页顶部大图 --- <-- 正文内容 -->
命令行添加
hexo new <blog_name>
Hexo常用命令
☛ hexo init <folder>,初始化博客存放文件夹
☛ hexo new <name>,新建博文
☛ hexo server,运行博客
☛ hexo clean,清除缓存文件 (db.json) 和已生成的静态文件 (public)
☛ hexo generate,生成静态网站文件
☛ hexo deploy,部署网站
☛ hexo version,查看hexo版本
添加评论区
Valine
1、应用→创建应用,创建完成后在设置→应用Keys中获取AppID和AppKey
2、在主题配置文件中指定Valine为评论模块
post: comments: enable: true type: valine
3、配置Valine评论模块参数
valine: appId: #Appid appKey: #AppKey path: window.location.pathname placeholder: '支持使用Markdown语法' #评论区默认填充文字 avatar: mp #默认显示头像 meta: ['nick', 'mail', 'link'] #显示评论者属性 requiredFields: [] pageSize: 10 #每页显示评论数 visitor: true #文章访问量统计 lang: 'zh-CN' #自定义语言 highlight: true #代码高亮 recordIP: true #是否记录评论者IP serverURLs: '' emojiCDN: emojiMaps: enableQQ: false
4、Valine需要使用Gravatar 自定义评论列表头像;
5、在Valine应用数据存储→结构化数据→Comment内管理评论;
主题自定义
- 将主题文件放置在theme文件夹下;
- 将主题配置文件 _config.yml 复制到博客根目录并重命名为 _config.<主题名>.yml;
Github实战
创建GitHub站点
https://github.com/
1、使用GitHub用户名创建仓库,命名格式:user.github.io,默认分支为master;(user必须为GitHub的用户名)
2、在user.github.io仓库中新建index.html文件,文件内容如:(一般来说,需要仓库名填写正确+仓库非空,仓库才会对外发布)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网站测试</title> </head> <body> <h1>成功!!!可以进行下一步了</h1> </body> </html>
3、在仓库“Settings”→“Pages”页面可看到如下提示,则仓库发布正常,点击https://user.github.io/可跳转到网站首页;
Your site is live at https://user.github.io/ Last deployed by @user user 12 minutes ago
保证本地能向Github提交代码
1、配置GitHub用户名、邮箱;
git config --global user.name "用户名" git config --global user.email "邮箱"
2、配置秘钥,使用命令ssh-keygen -t rsa生成秘钥,并将公钥添加到GitHub账户;
Hexo代码提交Github
1、网站目录下打开Git Bash安装发布插件,安装命令npm install hexo-deployer-git --save;
2、修改博客配置文件_config.yml的deploy部分;
deploy: type: git repository: ssh://git@github.com/user/user.github.io.git brandh: master messge:
3、上传博客代码
hexo s hexo clean hexo g hexo d
4、博客网站搭建完成,通过https://user.github.io/即可访问博客。
☛ 问题1:CNAME、README.md等文件丢失
当你重新提交博客代码后会发现前面修订的配置文件丢失。解决方法是将非md文件放置在source文件夹下,hexo每次提交代码时会将这里的文件复制到public目录后提交到GitHub仓库。但是,md文件会被转换为html,每次提交代码时需要在生成(hexo g)、上传(hexo d)之间,将md文件手动复制到public目录。
博客托管
域名配置分为:CNAME、A记录。互联网中用IP地址表示一个网站的访问地址,A记录使用一个容易识别的字符串(域名)表示IP地址,CNAME使用一个域名映射到另一个域名。以百度网站举例,最原始用户只能通过36.152.44.96地址访问,添加A记录后能够通过www.baidu.com,而添加CNAME后又能通过www.baidu2.com访问。
- A记录:www.baidu.com → 36.152.44.96
- CNAME:www.baidu2.com → www.baidu.com
CMD上pinguser.github.io获取博客网站IP
Github提供的域名user.github.io不够优雅,当你拥有自己的域名时,就可以将域名关联到user.github.io后,通过自己的域名访问了。但是,Github站点在国内访问并不稳定,这时候我们可以借助中间托管网站进行管理,这里推荐Vercel进行托管,操作如下:
-
进入Vercel官网,登录账号使用Github账户;
-
点击“add New”→“Project”新建项目,import对应Github项目即可;
-
点击进入新增的项目,进入“Setting”标签页,绑定我们的个人域名;
-
进入域名服务商官网,在自己域名的域名解析中添加A记录和CNAME记录,记录值在第3步时Vercel会进行提示,复制粘贴即可。
-
操作完成,在网页中输入个人域名就能访问博客网站了。
在线编辑博文
Hexo本地搭建博客后,用户每次编辑博文都需要在本地编译出博客源文件,再将博客源文件提交到GitHub。为了提高Hexo编辑博文的易用性,我们可以通过GitHub Actions实现博客的自动编译发布,即我们每次提交博客源码或GitHub上更新博文后,GitHub Actions自动触发博客的编译发布。
1、添加秘钥用于deploy过程操作GitHub仓库;
- 使用命令ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""生成gh-pages私钥、gh-pages.pub公钥;
- 仓库配置Deploy Keys→Add deploy key添加 gh-pages.pub公钥,name为public key of ACTIONS_DEPLOY_KEY,并在新建deploy key后点击approve按钮。
- 仓库配置secrets and variables→Actions→New repository secret ,name为ACTIONS_DEPLOY_KEY(后续yml文件中使用)。
2、新建.github/workflows/pages.yml文件自定义GitHub Actions操作,内容参照Hexo指导文档。
name: Pages on: push: branches: - sources # default branch jobs: pages: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Use Node.js 19.x uses: actions/setup-node@v2 with: node-version: "v19.6.0" - name: Cache NPM dependencies uses: actions/cache@v2 with: path: node_modules key: ${{ runner.OS }}-npm-cache restore-keys: | ${{ runner.OS }}-npm-cache - name: Install Dependencies run: npm install - name: Build run: npm run build - name: Setup Git Infomation run: | git config --global user.name 'name' git config --global user.email 'email' - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }} user_name: ${user.name} user_email: ${user.email} # 获取提交文章源码时的commit message,作为发布gh-pages分支的信息 commit_message: ${{ github.event.head_commit.message }} full_commit_message: ${{ github.event.head_commit.message }} github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./public
3、在博文底部添加编辑文章按钮,支持跳转到GitHub编辑界面。编辑themes→主题文件夹→layoutpost.ejs文件,在markdown-body模块下添加:
<div style="text-align: center "> <a href="https://github.com/user/user.github.io/edit/sources/source/<%- page.source %>" target="_blank">编辑文章✏</a> </div>
指导文章:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章