Loading

利用 GitHub+Hexo 搭建个人博客

利用 GitHub + Hexo 搭建个人静态博客，使用 Git Action 自动发布。

直接看这个吧,挺全的←_←

部署及发布(环境：windows7)

安装

  • 下载并安装git和NodeJs(NodeJs 版本需要>=8，不然不能运行 hexo)
  • 安装hexo：
    打开cmd命令窗口，输入命令：npm install -g hexo-cli 下载

部署

新建并打开文件夹，shift+右键，打开cmd命令窗口，输入命令：
hexo init npm install hexo g // 生成资源文件 hexo s // 本地运行服务：默认端口4000 //或者 hexo server -p 5000 自定义端口。
此时通过浏览器键入网址：localhost:4000 可以在本地访问博客。

发布到 github

  • 登陆 github，新建仓库：[username].github.io。
    注意，[username] 是 github 账号的用户名，比如我的仓库名应该是 linxiaoki.github.io。
  • 在本地，打开之前新建的文件夹，找到文件_config.yml，在文件最后看到 deploy:，在后面添加你的仓库地址，格式如下： 
    deploy:
  type: git
  repository: git@github.com:[username]/[username].github.io.git
  branch: master
  • 发布: shift+右键，打开cmd命令窗口： 
    hexo g
hexo d

此时浏览器访问 [username].github.io ，就可以访问了。

  1. 安装 hexo
npm install -g hexo
进入工作文件夹
hexo init
npm install
hexo g
hexo d
[hexo s]  运行在本地服务器，可以作为测试

博客个性化

好了不整理了，啥时候再说吧。。。

Hexo 文档>>
hexo 主题>>>

分割线 :)

改下语言 language: zh-Hans
头像：themes/yilia下 新建文件夹存放图片 assets/me.png
配置文件：yilia/_config.yml =>
avatar: /assets/me.png

发布文章

source/_post 添加md文件
source/_draft 是草稿

Front-Matter：在md 文章开头添加 参考

---
title: 题目
layout: false # 发布时，不会处理
date: 2015/7/13 10:34:33  # 时间
# 还可以 分类 和 添加标签
---

摘要与截断： <!-- more --> 在这之前会作为摘要，
去掉more按钮：_config.yml => excerpt_link:

(未尝试)可以有模板：hexo new photo "模板"
需要 scaffolds 文件夹内有 模板.md 文件？

圆形头像
右下角版权
https://blog.csdn.net/appleyuchi/article/details/91882571

添加访问量功能

工具

使用：百度的站长统计工具、learncloud、不蒜子

添加站点访问量

教程：添加站点和文章访问量

  • themes/yilia/layout/_partial/footer.ejs 添加：
//把原本的footer-rignt 标签内容替换：
<div class="busuanzi-count">
    <script async="" src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
        <span class="site-uv">
            <i class="fa fa-user"></i> 本站访客数
             <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
                  人次
            </span>
            <span class="site-pv">
            <i class="fa fa-eye"></i> 总访问量
            <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>次
    </span>
</div>

添加文章访问量

换 yelee

配置-----别人家的博客

GIT 库：hexo_git_source 没有添加 node_moudles 文件夹，npm install

next 主题配置

语言： language: zh-CN
双栏： scheme: Pisces
头像：avatar: /images/avatar.png
头像，添加评论
  • 添加访问量=> 修改配置文件
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye
  site_uv: true
  • 添加右下角动画
npm install --save hexo-helper-live2d

//(黑猫，也可以选择其他动画[仓库地址](https://github.com/EYHN/hexo-helper-live2d)
npm install --save live2d-widget-model-hijiki 

// 在文件末尾 hexo 配置文件
live2d:
    enable: true
    scriptFrom: local
    model:
        use: live2d-widget-model-hijiki  //对应动画
    display:
        position: right
        width: 200
        height: 390
    mobile:
        false
    react:
        opacity: 0.7

canvas_next: 
    enable:ture
    zindex: 2

 //鼠标事件“穿透”动画
//cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js
//下载文件，放在 next/source/js/src/canvas
 canvas_nest: /js/src/canvas-nest.js
// 更改js文件：添加 style
pointer-enents: none;

  • next 新版本没有 custom.styl 文件怎么办: 新建，main.styl 引入
    参考

  • 不能显示图片?

  • 其他：可以查看next/_config.yml文件，里面有很详细的介绍。

其他操作（2020/1/3新增）

  • 自定义样式（配置文件的 custom_file_path: 修改)

  • gulp 压缩

  • 源码部署到Netlify(可以在线编辑)

    • 页面重定向

git action 自动部署及发布

仓库备份博客源码

  可以在github上新建一个仓库 hexo_source，然后将仓库初始化，将主题中的.git文件夹删除，使用git add -A添加文件，并提交、推送即可。(注意：在本地部署发布时，需使用npm install命令下载相关包。)

Git Action 配置

  此时有两个仓库，[username].github.io博客发布的仓库，和hexo_source博客源码仓库。

生成密钥

  在本地运行ssh-keygen -t RSA -C "你的邮箱之类" -f "C://hexo_deploy"，如果提示"不是可运行的程序"，需要在ssh-keygen.exe文件目录下执行。生成密钥后，会发现在 C盘 根目录下多了两个文件，hexo_deploy和hexo_deploy.pub。

Git 添加密钥
  • 选择hexo-source仓库的设置，Settine -> Secrets -> Add a new secret，将hexo_deploy的内容复制到值里，并取名HEXO_DEPLOY_PRIVATE_KEY。
  • 选择[username].github.io仓库的设置，Settine -> Deploy Keys -> Add deploy key，将hexo_deploy.pub的内容复制到Key中，勾选Allow write access，Title可以随便写。
Git Action 配置

在hexo-source仓库的Actions选项卡下点击Set up a workflow yourself新建工作流，配置如下：

name: Deploy Blog

on: [push] # 当有新push时运行
 
jobs:
  build: # 一项叫做build的任务
    
    runs-on: ubuntu-latest # 在最新版的Ubuntu系统下运行
    
    steps:
    - name: Checkout # 将仓库内master分支的内容下载到工作目录
      uses: actions/checkout@v1 # 脚本来自 https://github.com/actions/checkout
      
    - name: Use Node.js 10.x # 配置Node环境
      uses: actions/setup-node@v1 # 配置脚本来自 https://github.com/actions/setup-node
      with:
        node-version: "10.x"
    
    - name: Setup Hexo env
      env:
        HEXO_DEPLOY_PRIVATE_KEY: ${{ secrets.HEXO_DEPLOY_PRIVATE_KEY }}
      run: |
        # set up private key for deploy
        mkdir -p ~/.ssh/
        echo "$HEXO_DEPLOY_PRIVATE_KEY" | tr -d '\r' > ~/.ssh/id_rsa # 配置秘钥
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan github.com >> ~/.ssh/known_hosts
        # set git infomation
        git config --global user.name 'linxiaoki'
        git config --global user.email 'linxiaoki@foxmail.com'
        # install dependencies
        npm i -g hexo-cli # 安装hexo
        npm i -g yarn
        yarn install
  
    - name: Deploy
      run: |
        # publish
        hexo clean && hexo generate && hexo deploy # 执行部署程序

参考网址

https://www.jianshu.com/p/1bc0f13c3b97
https://blog.csdn.net/dta0502/article/details/84403929

next主题美化配置参考|
next主题美化配置参考2|
next 主题配置 |
样版网站1 |
样板网站2|
官方：next 第三方集成工具|
icon 网站
Git Action自动化发布Hexo网站到GitHub Pages

posted @ 2025-03-12 22:16  一起滚月球  阅读(175)  评论(0)    收藏  举报