Mrli
别装作很努力,
因为结局不会陪你演戏。
Contacts:
QQ博客园

Hello~搭建Hexo博客

2022/03/29 环境配置 hexo
Word count: 1,044 | Reading time: 4min

电脑环境是Windows,安装好git后,所有搭建操作均在git bash内完成

1.需要安装git, node.js, npm

注:第一次安装Git会让配置user信息

1
2
3
> $git config --global user.name "yourname"   #(yourname是git的用户名)
> $git config --global user.email "youremail"
>

2.使用npm安装hexo: npm install -g hexo

3.创建hexo文件夹,并单击鼠标右键选择 Git bash:(我的创建路径是:E:\hexo)

4.在刚刚打开的git bash命令框中操作:

1
2
3
4
$hexo init 		#hexo 会自动在目录下创建网站所需要的文件
$npm install #安装依赖包
$hexo generate # 等价于hexo g
$hexo server #现在可以用127.0.0.1:4000访问hexo默认的hello world界面,等价于hexo s

5.部署到github (https://github.com/),

  • 首先注册登录,然后创建页面仓库,Repository name 命名必须是 youname.github.io ,(youname 就是你注册时候用的name)
  • ssh-keygen -t rsa -C "email" #生成ssh密钥,按三次回车键,密码为空,这边会生成id_rsa和_rsa.pub文件,打开id_rsa.pub,复制全文添加到GitHub 的Add SSH key中。
  • 最后可以验证一下ssh -T git@github.com,看出现的是不是Hi "Yourname"如果出现了你的github用户名,则成功了

6.下载Hexo主题

  • $git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia #下载hexo的yilia 模板到自己的文件目录下

  • 打开项目目录下的**_config.yml**文件,更改theme:yilia

    ▲注意: _config.yml文件中配置时:后面都要加空格,与:隔开

7.开启评论功能:使用gitment

$npm install gitment --save #安装gitment

然后在 https://github.com/settings/applications/new 进行注册,获取Client ID和Client Secret

▲注意:其中Authorization callback URL是个坑:

这一项不能乱填,不让就不能"初始化评论"…


应该怎么填呢?

  • 如果你绑定了自己的域名就直接写自己的域名: https://nymrli.top/
  • 如果没有的话才填写http://Freedomisgood.github.io,否则会一直弹回博客首页,而不能"初始化评论"或者"发表评论"

其中的原因就在于,既可以通过www.nymrli.top解析,也可通过nymrli.top解析,还可以通http://Freedomisgood.github.io解析,而Authorization callback URL只能写一个.(最终解析到的网站)…===>就是nymrli.top

△.感谢IsResultXaL提供的思路

打开themes/yilia目录下的_config.yml文件进行修改并保存:

再次生成网站,提交网站:hexo d -g就可以输入网址:https://yourname.github.io打开你的博客了

8.显示文章摘要图片

  • 1 把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true

  • 在hexo目录下打开git Bsh或者power Shell,npm install hexo-asset-image --save安装插件

  • 再运行hexo n "xxxx"来生成md博文时,/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹

  • 4 最后在xxxx.md中想引入图片时,先把图片复制到xxxx这个文件夹中,然后只需要在xxxx.md中按照markdown的格式引入图片:

    1
    ![你想输入的替代文字](xxxx/图片名.jpg)

▲ .之前一直失败,原因在于,我写图片链接的时候是直接拖动图片到编辑器中的,路径为![v2-代替文字](E:/hexo/source/_posts/xxxx/图片名.jpg),后来一直错误,无法正常显示后,发现只需要写成![代替文字](xxxx/图片名.jpg)即可…

文章总体框架:

1
2
3
4
5
6
7
8
9
10
---
layout: photo
title: Hello Hexo
date: 2018-08-30 21:14:27
tags:
- hexo
---
![代替文字](xxxx/图片名.jpg)
<!--more-->
正文

→推一个不错的文章Hexo+Coding+Github部署个人博客Error全集,如果出现未能解决的问题,希望能从这篇文章略微得到启发.

异常:

Nunjucks Error expected variable end解决办法

{ { } }{ % % }包装的内容将被解析,并可能导致问题。您可以使用原始标签插件包装敏感内容。
找到正文里面{ {} }{ %% }这样的语句,作如下修改:

1
2
3
4
5
```
{% row %}
Hello {{ sensitive }}
{% endrow %}
```

其他方法

{ {} }之间加上空格变成{ {} } (这里看不出区别,知道这个意思就行…) { %% }之间加上空格变成{ %% }

Author: Mrli

Link: https://nymrli.top/2018/08/30/hello-hexo/

Copyright: All articles in this blog are licensed under CC BY-NC-SA 3.0 unless stating additionally.

< PreviousPost
Python字典基本操作介绍
CATALOG
  1. 1. 1.需要安装git, node.js, npm
  2. 2. 2.使用npm安装hexo: npm install -g hexo
  3. 3. 3.创建hexo文件夹,并单击鼠标右键选择 Git bash:(我的创建路径是:E:\hexo)
  4. 4. 4.在刚刚打开的git bash命令框中操作:
  5. 5. 5.部署到github (https://github.com/),
  6. 6. 6.下载Hexo主题
  7. 7. 7.开启评论功能:使用gitment
  8. 8. 8.显示文章摘要图片
    1. 8.1. 文章总体框架:
  • 异常:
    1. 1. Nunjucks Error expected variable end解决办法