eden icon indicating copy to clipboard operation
eden copied to clipboard

Hexo 博客,我新的纪录方式

Open OldBeLight opened this issue 7 years ago • 0 comments

Hexo 博客,我新的纪录方式

今天刚从张哥的小密圈里了解了几种搭建博客的方法,其中就有Hexo。去网上搜到教程,这个教程就是用Hexo写的,(在这里)但是翻到搭好时的效果图的时候,我就想放弃了。嗨呀,这还不如我之前用模板拼的博客好看,看来这画风怎么会有些博客的动力嘛。后来一眼瞟到教程中写的主题那块了,既然可以换主题,那我就放心了

教程中的步骤很全,很快就搭好了,但是稍有不足的是,没有放上每一步的截图。那么我这里再写一遍吧,趁热...打铁

准备工作

安装Node.js

走你

作用:用来生成静态页面的

安装Git

走你

作用:把本地的hexo内容提交到github上去

申请Github账号并建立代码仓库

走你

作用:这里是准备把博客托管到github上

注册登录就不说了,这里讲讲怎么建立代码仓库。Github老鸟只需要知道,这个仓库的名称的格式必循是是your_user_name.github.io就可以自己弄好然后进入下一步了。

如果没用过github,跟着下面图中的红框一路走吧

仓库名必须为your_user_name.github.io,比如我的用户名是ChenViVi,那么仓库名称为ChenViVi.github.io

安装Hexo

win键+r键打开终端,输入如下指令

npm install -g hexo

npm是安装了Node.js才能使用的指令,然后安装了hexo咱们就能使用hexo命令了

初始化

创建一个文件夹,这里我创建的文件夹的名字是hexo,然后用cd命令进入这个文件夹。不懂cd命令的童鞋看图

然后执行如下命令

hexo init

生成静态页面

执行如下命令

hexo g

本地启动

启动本地服务,进行文章预览调试,执行如下命令

hexo server

浏览器输入http://localhost:4000,即可看到你的博客

然后终端中按下Ctrl+C退出服务吧

与Github建立关联

1.Win+R打开终端,输入如下命令

git config --global user.name "此处替换为你的Github用户名"
git config --global user.email "此处替换为你的Github绑定邮箱"

2.用记事本打开_config.yml,翻到文本最末尾,将deploy:后面的内容修改如下,其中repository: 后写你的仓库地址

deploy:
  type: git
  repository: https://github.com/ChenViVi/ChenViVi.github.io.git
  branch: master

: 后面要有一个空格

执行如下命令来安装hexo-deployer,这样才能使用hexo来执行git部署

npm install hexo-deployer-git --save

将代码部署到Github

hexo deploy

如果你在第6步中没有正确的写好_config.yml文件,此时将出现YAMLException

新建并上传文章

1.执行如下命令来新建文章

hexo new "new article"

2.打开你当前网站目录下的source_posts路径,里边会有一个new-aritcle.md文件,打开它开始写文档吧,不懂MarkDown的童鞋戳这里

3.执行如下3条命令来上传文章

清除现在的静态网页

hexo clean

重新生成静态网页

hexo g

上传到Github

hexo deploy

以后写文章就是无限循环这几步

其他常用命令

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
hexo help  #查看帮助
hexo version  #查看Hexo的版本

博客主题

博客的画风好不好会直接影响到一个人阅读与写作的心情,所以为了改善博客的画风,可以配置博客主题,可以直接百度一下hexo主题

这里推荐http://hexo.io/themes这个网站,里边有很多主题,还可以直接预览效果

下面介绍一下最常见的主题安装步骤,以hueman主题为例。一般来说,github里会介绍主题安装与额配置的步骤的,或许会稍有不同

打开hueman主题的主页

下载主题

在你的hexo博客根目录下,在终端执行如下命令

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

这行命令后面的第一个参数是主题的地址,如果希望使用其他主题,更改此参数即可,查看参数的方法如图所示

第二个参数是主题存放的文件夹,这里把下载的主题保存在根目录下的 themes/hueman文件夹

设置配置文件

1.打开根目录下的_config.yml文件,将语言设置为中文

2.翻到_config.yml文件的文本末尾,将主题设置为hueman

这里 theme: hueman 中的hueman对应着你刚才的主题的下载目录,也就是根目录下的 themes/hueman文件夹,如果需要使用其他主题,把hueman改成其他themes目录中的文件夹即可

3.设置主题配置

将根目录下的 themes/hueman文件夹中的_config.yml.example文件重命名为_config.yml

每一个主题的配置文件都叫做_config.yml,这里是直接把默认的示例配置文件作为配置文件直接使用,如果需要自定义主题,可以打开配置文件自行修改,修改的方法每一个主题的说明文档里都有介绍

安装搜索功能(可选,如果不执行这一步,将无法使用博客搜索功能)

在终端执行如下命令

npm install -S hexo-generator-json-content

完成以上步骤,你的博客主题就配置完成了,执行以下命令,查看效果吧

hexo clean
hexo g
hexo server

打开http://localhost:4000/

OldBeLight avatar Jul 09 '18 02:07 OldBeLight