:root{--puock-block-not-tran:100%}

使用 Hexo 创建个人博客

699次阅读
没有评论

共计 4523 个字符,预计需要花费 12 分钟才能阅读完成。

什么是 Hexo?

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

安装前提

安装 Hexo 相当简单,只需要先安装下列应用程序即可: + Node.js + Git

详细的环境安装过程可以访问 Hexo 文档

安装 Hexo & 初始化

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

npm install -g hexo-cli

对于熟悉 npm 的进阶用户,可以仅局部安装 hexo 包。

npm install hexo

局部安装 hexo 可在 package.json 配置 scripts 来运行 hexo 命令

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

hexo init <folder>
cd <folder>
npm install

hexo会自动下载一些文件到这个目录,包括node_modules,目录结构如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

执行以下命令之后,hexo就会在 public 文件夹生成相关html文件,在部署的时候我们只需要把 public 下面的内容部署到服务器上就可以了

hexo g # 生成
hexo s # 启动服务

hexo s是开启本地预览服务,打开浏览器访问 http://localhost:4000 即可看到内容, 第一次初始化的时候hexo已经帮我们写了一篇名为 Hello World 的文章,默认的主题比较丑,打开时就是这个样子

使用 Hexo 创建个人博客
Hexo Hello World

其中有些我在安装过程中体会到的注意事项

  • 很多命令既可以用Windows的cmd来完成,但有些支持在linux编辑比较好, 我自己是在完全的linux环境中进行编辑的
  • hexo不同版本差别比较大,网上很多文章的配置信息都是基于2.x的,所以注意不要被误导
  • hexo有2种 _config.yml 文件,一个是根目录下的全局的 _config.yml ,一个是各个 theme 下的

修改主题

既然默认主题很丑,那我们别的不做,首先来替换一个好看点的主题。这是 官方主题列表 列表中的主题一般都是放在 github 上, 可使用 git 下载下来. 个人比较喜欢这款 stun 主题, 下载这个主题:

 git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun 

主题都统一放在 项目的 themes文件夹中 修改 项目中 _config.ymltheme: landscape 节点改为 theme: stun ,然后重新执行 hexo g 来重新生成。 如果出现一些莫名其妙的问题,可以先执行 hexo clean 来清理一下 public 的内容,然后再来重新生成和发布。

写博客

Hexo 有三种默认布局:post、page 和 draft。在创建这三种不同类型的文件时,它们将会被保存到不同的路径;而您自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹。

布局 路径
post source/_posts
page source
draft source/_drafts

Hexo 默认以标题做为文件名称,但您可编辑 new_post_name 参数来改变默认的文件名称,举例来说,设为 :year-:month-:day-:title.md 可让您更方便的通过日期来管理文章。

变量 描述
:title 标题(小写,空格将会被替换为短杠)
:year 建立的年份,比如, 2015
:month 建立的月份(有前导零),比如, 04
:i_month 建立的月份(无前导零),比如, 4
:day 建立的日期(有前导零),比如, 07
:i_day 建立的日期(无前导零),比如, 7

草稿

Hexo 的一种特殊布局:draft,这种布局在建立时会被保存到 source/_drafts 文件夹,您可通过 publish 命令将草稿移动到 source/_posts 文件夹,该命令的使用方式与 new 十分类似,您也可在命令中指定 layout 来指定布局。

hexo new draft <title>
hexo publish <title>

草稿默认不会显示在页面中,您可在执行时加上 --draft 参数,或是把 render_drafts 参数设为 true 来预览草稿。

直接编写

定位到我们的hexo根目录,执行命令:hexo new 'my-first-blog' hexo会帮我们在_posts下生成相关md文件, 我们只需要打开这个文件就可以开始写博客了,默认生成如下内容:

---
title: postName #文章页面上的显示名称,一般是中文
date: 2021-01-25 17:40:14 #文章生成时间,一般不改,当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签,可空,多标签请用格式,注意:后面有个空格
description: 附加一段文章摘要,字数最好在140字以内,会出现在meta的description里面
---

以下是正文

生成页面

使用 hexo new page "my-second-blog" 命令, 生成如下:

---
title: my-second-blog
date: 2021-01-26 09:44:01
---

最终部署时生成:./public/my-second-blog/index.html,但是它不会作为文章出现在博文目录。而是作为一个页面直接显示在

如何让博文列表不显示全部内容

默认情况下,生成的博文目录会显示全部的文章内容,如何设置文章摘要的长度呢?

答案是在合适的位置加上 <!--more--> 即可,例如:

# 前言

使用github pages服务搭建博客的好处有:

1. 全是静态文件,访问速度快;
2. 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台;
3. 可以随意绑定自己的域名,不仔细看的话根本看不出来你的网站是基于github的;

<!--more-->

4. 数据绝对安全,基于github的版本管理,想恢复到哪个历史版本都行;
5. 博客内容可以轻松打包、转移、发布到其它平台;
6. 等等;

部署

Hexo可部署在很多静态网页平台 支持 GitHub Pages, GitLab Pages, Heroku 等, 可参考 文档.

但这些部署方式在国内也存在一些问题

    1. 加载速度缓慢甚至无法访问, 虽然hexo生成的页面都比较小, 然而以上的部署方式已经在国内处于无法访问的状态.
    1. 可添加自定义域名, 加上国内的CDN进行加速解决上面的问题, 但是我在尝试过之后发现, 博客不可被百度索引.
    1. 如果使用自定义域名, 且域名已经备案的情况, 解析到上面的页面可能会导致域名备案信息被吊销的情况.

所以我的博客就放在国内的阿里云服务器上,用 docker build 发布, 当然这样也产生了一定的成本, 我也主要是想使用Hexo构建一个自己比较完善的博客.

doker 部署方式可参考以下 Dockerfile , 放在根目录 执行 hexo clean && hexo generate 后再执行 docker build -t <name>

FROM nginx:alpine as run
COPY ./public /home/www/public
COPY ./nginx.conf /etc/nginx/nginx.conf
WORKDIR /home/www/public
CMD ["nginx", "-g", "daemon off;"]

在服务器部署中我采用 docker-compose, 部分配置文件 服务器主要采用 nginx

### nginx.conf

worker_processes  2;

# ssl_engine device;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
 
    server_tokens off;

    access_log      off;
    sendfile        on;
    keepalive_timeout  65;

    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 32k;
    gzip_comp_level 9;
    gzip_types text/javascript text/css text/xml image/jpeg image/png image/gif application/javascript application/json;
    gzip_vary on;
    gzip_proxied off;

    server {
        listen       80;
        server_name  nenufm.com;
        rewrite ^(.*)$  https://nenufm.com permanent;
    }

    server {
        listen     443 ssl http2;
        server_name  nenufm.com;

        ssl_certificate      /etc/nginx/sslcrt/5112744_nenufm.com.pem;
        ssl_certificate_key  /etc/nginx/sslcrt/5112744_nenufm.com.key;
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers AESGCM:ALL:!DH:!EXPORT:!RC4:+HIGH:!MEDIUM:!LOW:!aNULL:!eNULL;
        ssl_prefer_server_ciphers on;


        location / {
            proxy_pass http://hexo-blog;
            proxy_http_version 1.1;
            proxy_set_header   Upgrade $http_upgrade;
            proxy_set_header   Connection keep-alive;
            proxy_set_header   Host $host;
            proxy_cache_bypass $http_upgrade;
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Proto $scheme;
        }
    }

}
### docker-compose

version: '3.1'

services:

    hexo-blog:
        container_name: server_hexo_blog
        restart: always
        image: <my hub>/hexo-blog:latest

    niginx:
      container_name: server_niginx
      tty: true
      image: nginx:latest
      restart: always
      ports:
          - '443:443'
          - '80:80'
      volumes:
          - ./nginx/nginx.conf:/etc/nginx/nginx.conf
          - ./nginx/sslcrt/:/etc/nginx/sslcrt/
      environment:
          TZ : 'Asia/Shanghai'
      depends_on:
          - hexo-blog

正文完
 1
太阳
版权声明:本站原创文章,由 太阳 于2021-01-25发表,共计4523字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)