Hexo & Github

Download

  1. git
  2. nodejs

Step

  1. node -v 查看node版本

    npm -v 查看npm版本

    npm install -g cnpm --registry=http://registry.npm.taobao.org 安装cnpm 管理器镜像

    cnpm -v 查看cnpm版本

  2. cnpm install -g hexo-cli 安装hexo框架

    hexo -v 查看hexo版本

    mkdir blog 创建blog目录

    cd blog 进入blog目录

    (npm install 进一步安装hexo所需文件 )

  3. sudo hexo init (+文件夹名) 生成博客 初始化创建博客文件夹

    hexo就安装完成,可以启动。

    1.hexo clean 清除所有记录

    2.hexo generate 生成静态网页

    3.hexo server -p 80 启动服务 或hexo s 启动本地博客服务

    4.http://localhost:4000/ 本地访问地址

绑定远程

Github创建一个新的仓库,命名 YourGithubName.github.io

在blog目录下安装git部署插件

cnpm install --save hexo-deployer-git

或者 npm install hexo-deployer-git --save

复制URL,到hexo的配置文件_config.yml。注:Http已经无法直接通过github账户密码访问,github设置令牌 ,直接使用SSH链接更简便。

deploy:
type: git
repo: git@github.com:YourGithubName/YourGithubName.github.io.git
branch: master

部署到Github仓库 hexo d

访问地址查看博客 https://YourGithubName.github.io/

问题

  1. 不能识别git的SSL证书

    fatal: unable to access 'https://github.com/hexojs/hexo-starter.git/': OpenSSL SSL_connect: Connection was reset in connection to github.com:443

    git config --global http.sslVerify "false"

  2. fatal: unable to access ‘xxxxx’: OpenSSL SSL_connect: Connection was reset in connection to github.com:443

    法一:git bash命令

    git config --global http.sslBackend "openssl"
    git config --global http.sslCAInfo "C:\Program Files\Git\mingw64\ssl\cert.pem"(git安装路径)

    法二:VPN导致

    1.查看自己的VPN端口号,例:

    git config --global http.proxy 127.0.0.1:7890
    git config --global https.proxy 127.0.0.1:7890

    2.取消再进行配置

    git config --global --unset http.proxy
    git config --global --unset https.proxy

    查看命令

    git config --global http.proxy	#查看git的http代理配置
    git config --global https.proxy #查看git的https代理配置
    git config --global -l #查看git的所有配置
  3. Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency bash: syntax error near unexpected token Warning:' .

    Node版本太高,可修改 \node_modules\stylus\lib\nodes\index.js ,代码最前面加:

    exports.lineno = null;
    exports.column = null;
    exports.filename = null;

    无用,则:

    vim node_modules/nib/package.json
    "dependencies": {
    "stylus": "0.54.8" # 将 stylus 版本由原来0.54.4改成 0.54.8
    }
    保存退出,执行 npm install
  4. hexo init blog 错误,失败,ssh改了问题1以及443 error还是错。

    拆解

    git clone https://github.com/hexojs/hexo-starter.git blog  (此步失败换ssh链接)
    cd blog
    git submodule init
    git submodule update
    npm i (==install)

    或换源

    git clone https://gitee.com/weilining/hexo-starter.git blog
    cd blog
    git submodule init
    git submodule update
    npm config set registry http://registry.npm.taobao.org
    npm i
  5. 字体乱码

    1643357305658

    用VSCode打开对应.yml文件,切换编码为UTF-8,重新输入中文字符。

修改主题

  1. 如不喜欢blog ,可删除文件再创建。

  2. 克隆目标主题

    git clone git@github.com:litten/hexo-theme-yilia.git themes/yilia

  3. 配置文件

    _config.yml 改 theme ----> theme: yilia

  4. 清理 生成 推送远端

    hexo c hexo g hexo s hexo d

  5. GitHub 角 设置z-index: 1031属性值避免被上层覆盖

butterfly
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
//stylus 主题的依赖,必须安装
npm install hexo-renderer-pug hexo-renderer-stylus

使用

新建文章

hexo new test 生成主页,在test/source/_posts下会生成test.md文件

文内图片

  1. 把主页配置文件 _config.yml 里的 post_asset_folder 设置为true;

  2. 在hexo目录下执行 npm install hexo-asset-image --save

  3. hexo n "xxxx" 生成md博文,/source/_posts 文件夹内除了 xxxx.md 文件还有一个同名文件夹;

  4. xxxx.md中插入图片时,把图片复制到xxxx文件夹中,然后在xxxx.md中按照markdown的格式引入图片。

参考

gitee+hexo搭建个人博客 - 乾坤盘 - 博客园 (cnblogs.com)

手把手教你从0开始搭建自己的个人博客 bilibili

Butterfly美化 - MoYu-zc - 博客园 (cnblogs.com)

butterfly官方文档

Gittalk评论系统配置 & gitalk

检索

url链接生成