阿里云+Hexo搭建个人博客过程记录

整体流程

服务器搭建->本地客户端博客生产环境构建(Node.Js+Hexo)->服务器端发布环境布置(Nginx+Git)

阿里云服务器的操作

1. 购买
   云服务器有很多种选择,国内的阿里腾讯,国外的一些厂商.考虑到阿里的性价比与工单服务稳定性,恰逢做活动一口气买了三年(ubuntu).后期稳定了可以考虑用树莓派等微型低功耗机自己搭建服务器.

2. 配置安全组规则
   http协议需要访问80端口,而阿里云默认是不授权80端口访问的,因此需要手动配置.
   主节目左侧网络与安全-安全组-右侧配置规则-手动添加如下图所示:
   

本地客户端博客生产环境构建

生产环境需要满足几个要求,简单接口友好,依赖少,稳定性高,社区活跃,支持markdown,速度快,模板支持丰富.综合考虑选择了Hexo静态博客生成器.本地生产环境是ubuntu,windows同样支持如下的各个软件.

• Hexo是在Node.js中运行的,首先安装Node.js.
  选择LTS版本的最新版安装(修改setup_后面的版本号):

  curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash  - 
  sudo apt-get install -y nodejs
  node -v #确认版本即说明安装完成

• 安装git

  sudo apt-get install git-core
  git version #确认版本

• Hexo官网指导安装

  npm install -g hexo-cli --registry https://registry.npm.taobao.org #临时使用国内淘宝源,加快速度

  或者永久改为国内源:

  npm config set registry https://registry.npm.taobao.org #改为国内源
  npm config get registry #查看npm源地址有没有换成功
  npm config set registry https://registry.npmjs.org/ #重置为官方源

  运行hexo的两种方式:

  1. npx hexo <command>

2. 设置环境变量:

   echo 'PATH="$PATH:....../node_modules/.bin"' >> ~/.profile

• 确认安装
  1. 初始化

     hexo init Hexo #在当前目录,新建Hexo文件夹,并在Hexo文件夹初始化hexo
     cd Hexo
     npm install hexo-deployer-git --save#安装可能还需要的依赖项
     npm install hexo-server

  2. 启动测试

     hexo clean //清空hexo缓存
     hexo g   //全拼hexo generate,生成hexo博客
     hexo s   //全拼hexo server,本地访问hexo博客

     成功启动以后,本地浏览器访问http://localhost:4000就能看到hexo的默认helloworld页面.

服务器端发布环境布置

1. git安装设置

• 选择目录作为本地与服务器同步的git目录.(选择在/home下可以保证权限问题较少).
• 初始化git仓库

  cd /home/your_git_dir
  git init --bare MyBlog.git

  使用--bare关键初始化的原因是保证服务器端不存在工作区,也就不存在操作服务器端代码后与本地推送冲突的问题.详细参照博客.
• 创建git hook,用于自动部署(之前工作中用jenkins的hook做CI,如果不需要复杂的系统,可以使用git自带的hook,太强大了.感叹Linus Torvalds太牛了.)

  vim /home/your_git_dir/MyBlog.git/hooks/post-receive

  创建命令在接收push后更新work-tree.

  #!/bin/bash/
  git --work-tree=/home/your_git_dir/MyBlog --git-dir=/home/your_git_dir/MyBlog.git checkout -f

  赋予执行权限:

  chmod +x /home/your_git_dir/MyBlog.git/hooks/post-receive

• 添加公钥密匙文件
  在本地命令行生成公钥密匙文件,copy内容到服务器端中新建的authorized_keys中.

  ssh-keygen
  cat ~/.ssh/id_rsa.pub

2. Nginx反向代理

• 安装

  sudo apt update
  sudo apt install nginx

  安装完成后,Nginx自动启动,用下面的命令检查服务状态:

  sudo systemctl status nginx

  输出将如下所示:

  nginx.service - A high performance web server and a reverse proxy server
  Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
  Active: active (running) since Sun 2018-04-29 06:43:26 UTC; 8s ago
      Docs: man:nginx(8)
  Process: 3091 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
  Process: 3080 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
  Main PID: 3095 (nginx)
      Tasks: 2 (limit: 507)
  CGroup: /system.slice/nginx.service
          ├─3095 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
          └─3097 nginx: worker process

• 防火墙配置
  安装ufw工具,打开HTTP80和HTTPS443端口.可以启用'Nginx Full'配置文件,其中包括两个端口的规则:

  sudo ufw allow 'Nginx Full'

  验证状态:

  sudo ufw status

• 测试安装
  在浏览器中打开http://YOUR_IP,可以看到Nginx的默认登陆界面如下图.
  

• 修改配置文件

  vim /etc/nginx/sites-available/default

  把root的路径值由/var/www/html改为/home/your_git_dir/MyBlog,如下:

  server {
        listen 80 default_server;
        listen [::]:80 default_server;
  
        # SSL configuration
        #
        # listen 443 ssl default_server;
        # listen [::]:443 ssl default_server;
        #
        # Note: You should disable gzip for SSL traffic.
        # See: https://bugs.debian.org/773332
        #
        # Read up on ssl_ciphers to ensure a secure configuration.
        # See: https://bugs.debian.org/765782
        #
        # Self signed certs generated by the ssl-cert package
        # Don't use them in a production server!
        #
        # include snippets/snakeoil.conf;
  
        # root /var/www/html; 
        root /home/your_git_dir/MyBlog;
        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;
  
        server_name _;
  
        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
        }

  重新加载配置文件,启动Nginx

  service nginx reload
  service nginx restart

  现在访问云服务器的公网ip会提示404,因为还没有把本地的hexo部署到云服务器的git仓库,所以/home/your_git_dir/MyBlog文件夹为空,自然访问不到任何文件.

• 启动Nginx
  关闭:nginx -s stop
  开启:nginx -s reload
  如果报错nginx: [error] invalid PID number “” in “/run/nginx.pid”:

  nginx -t #找到配置文件位置
  nginx -c /etc/nginx/nginx.conf
  nginx -s reload

1. 部署本地hexo到服务器
   修改hexo根目录的_config.yml文件最后的Deployment的内容:

   deploy:
   type: git
   repo: username@xx.xx.xxx.xxx(改成自己的公网ip):/home/your_git_dir/MyBlog.git
   branch: master
   message:

   Hexo有helloworld的sample.可以直接生成后推送到服务器.

   hexo clean
   hexo g -d

   按照提示输入密码,可看到push到远程服务器端.访问服务器的公网ip可以看到demo的helloworld页面.

Hexo的使用与个性化

1.基本构成

.
├── _config.landscape.yml
├── _config.yml             #Hexo的配置文件
├── db.json
├── node_modules
├── package.json            #子程序包,例如EJS,Stylus,Markdown
├── package-lock.json
├── public                  #source里的Markdown和HTML文件会被解
#析并放到public文件夹,而其他文件会被拷贝过去
├── scaffolds               #模板文件,分别有post,page,draft
├── source                  #存放用户资源的地方,如markdown文章
|   ├── _drafts
|   └── _posts              
└── themes                  #主题模板

2.配置修改

在项目根目录下修改各项配置选项_config.yml,例子如下:

title: 分享-成长 #主页标题
subtitle: 'cx的博客' #副标题
description: '自动驾驶决策与路径规划算法工程师,旅日海归,重度电影推理小说爱好者' # 网站描述
keywords: null
author: cx #作者,左下角显示
language: zh-CN # 选择中文简体
timezone: 'Asia/Shanghai'
url: http://www.chuxin911.com/
permalink: ':year/:month/:day/:title/'  # 文章的永久链接格式
permalink_defaults: null #永久链接中各部分的默认值
pretty_urls: #改写 permalink 的值来美化 URL
trailing_index: false #是否在永久链接中保留尾部的index.html,设置为false时去除
trailing_html: true #是否在永久链接中保留尾部的.html, 设置为false时去除 (对尾部的index.html无效)
source_dir: source #资源文件夹,这个文件夹用来存放内容
public_dir: public #公共文件夹,这个文件夹用于存放生成的站点文件
tag_dir: tags #标签文件夹
archive_dir: archives #归档文件夹
category_dir: categories #分类文件夹
code_dir: downloads/code #Include code 文件夹,source_dir 下的子目录
i18n_dir: ':lang' #国际化(i18n)文件夹
skip_render: null #跳过指定文件的渲染.匹配到的文件将会被不做改动地复制到 public 目录中.您可使用 glob 表达式来匹配路径.
new_post_name: ':title.md' #新文章的文件名称
default_layout: post #预设布局,post or page or draft
auto_spacing: false #在中文和英文之间加入空格
titlecase: false #把标题转换为 title case
external_link:
enable: true #在新标签中打开链接
field: site #对整个网站(site)生效或仅对文章(post)生效
exclude: '' #需要排除的域名.主域名和子域名如 www 需分别配置
filename_case: 0 #把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false #显示草稿
post_asset_folder: true #启动Asset文件夹.
#启用的话,Hexo将会在每一次创建新文章时自动创建一个同名文件夹,便可以将文章所引用的相关资源放到这个同名文件夹下,然后通过相对路径引用.
#如果Hexo项目中只有少量图片,那最简单的方法就是将它们放在source/images文件夹中.
#然后通过类似于![](/images/image.jpg)的方法访问
relative_link: false #把链接改为与根目录的相对位址
future: true #显示未来的文章
highlight: #代码块的设置, 请参考 Highlight.js 进行设置
enable: true
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs: #代码块的设置, 请参考 PrismJS 进行设置
enable: false
preprocess: true
line_number: true
tab_replace: ''
index_generator:
path: ''
per_page: 10
order_by: '-date'
default_category: uncategorized #默认分类
category_map: null #分类别名
tag_map: null #标签别名
meta_generator: true #Meta generator标签. 值为false时Hexo不会在头部插入该标签
date_format: YYYY-MM-DD #Hexo 使用 Moment.js 来解析和显示时间
time_format: HH:mm:ss
updated_option: mtime #当Front Matter中没有指定updated时updated的取值.mtime:使用文件的最后修改时间.ate:使用date作为updated的值.
#可被用于Git工作流之中,因为使用Git管理站点时,文件的最后修改日期常常会发生改变.
#empty: 直接删除updated,使用这一选项可能会导致大部分主题和插件无法正常工作.
per_page: 10 #每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page #分页目录
include: null #在 Hexo 配置文件中,通过设置include/exclude可以让Hexo进行处理或忽略某些目录和文件夹.
#可以使用glob表达式对目录和文件进行匹配.
#include和exclude并不适用于themes/目录下的文件.如果需要忽略themes/目录下的部分文件或文件夹,可以使用ignore或在文件名之前添加下划线_
exclude: null
ignore: null
theme: icarus #当前主题名称.值为false时禁用主题
theme_config: null #主题的配置文件.在这里放置的配置会覆盖主题目录下的 _config.yml 中的配置
deploy: #部署部分的设置
type: git
repo: *******
branch: ****
message: null

除了此处的配置文件,还有其他地方可以配置.优先级顺序如下:
theme_config > _config.[theme].yml > _config.yml

3.Hexo指令操作

1. Init
   hexo init [folder]
   新建一个网站
2. new
   hexo new [layout] <title>
   新建一篇文章,layout为post/page/draft.
   hexo new page --path about/me "About me"
   注意!title 是必须指定的
3. generate

   hexo generate -d(--deploy) -w(--watch) -b(--bail) -f(--force) -c(--concurrency)
   #or 
   hexo g

   生成静态文件
4. publish
   hexo publish [layout] <filename>
   发布草稿
5. server
   hexo server -p(--port) -s(--static) -l(--log)
   启动服务器.默认情况下,访问网址为:http://localhost:4000/
6. deploy
   hexo deploy -g(--generate)
7. render
   hexo render <file1> [file2] ... -o(--output)
   渲染文件
8. migrate
   hexo migrate <type>
   从其他博客系统 迁移内容
9. clean
   hexo clean
   清除缓存文件 (db.json) 和已生成的静态文件 (public)
10. list
    hexo list <type>
    列出网站资料
11. version
    hexo version
12. 选项
    安全模式hexo --safe,调试模式hexo --debug, 简洁模式hexo --silent,显示草稿hexo --draft,自定义CWD(Current working directory)hexo --cwd /path/to/cwd.
    自定义配置文件的路径

    # 使用 custom.yml 代替默认的 _config.yml
    hexo server --config custom.yml
    # 使用 custom.yml 和 custom2.json,其中 custom2.json 优先级更高
    hexo generate --config custom.yml,custom2.json,custom3.yml

主题收集与选定

主题要求:外观简约有个性,性能好加载快,社区支持度高,设计优雅,平台依赖低,配置操作简单丰富
推荐网站:https://hexo.voxel.site/
最终选择icarus主题

1. 安装与配置

   npm install -S hexo-theme-icarus    #在博客母目录下安装
   npm install bulma-stylus
   hexo config theme icarus            #在_config.yml文件中的开启Icarus

   Icaraus的配置选项优先级如下:
   文章/页面的front-matter > _config.post.yml和_config.page.yml的布局配置文件 > _config.icarus.yml默认主题配置文件 > _config.yml的站点配置文件

   其中在_config.icarus.yml可配置主要内容如下:

   • 主题变体

     variant: default #or cyberpunk

   • Logo
     设置你站点的logo. 此logo会显示在导航栏和页脚. logo配置的值既可以是你的logo图片的路径或URL地址

     logo: /img/logo.svg
     # or设置成文字 
     logo:
         text: My Beautiful Site
           

   • Favicon

     head:
     favicon: /img/favicon.png

   • Web App Manifest,Open Graph与Google Structured Data(待确认含义)
   • 页面元信息

     head:
         meta:
             - 'name=theme-color;content=#123456'
             - 'name=generator;content="Hexo 4.2.0"'

   • RSS

     head:
     rss: /path/to/atom.xml

   • 导航栏,页脚
     其中link中可以使用FontAwesome图标来作为纯文字链接的替换

     <链接名>:
         icon: <FontAwesome图标的class名>
         url: <链接URL>

   • 代码高亮
     可以通过article中的highlight设置来自定义代码块.从highlight.js/src/styles下列出的所有主题中选择一个主题.然后,复制文件名(不带.css后缀)到theme设置项中.
     如要隐藏复制代码按钮,将clipboard设置为false.如果希望折叠或展开所有代码块,将fold设置为"folded"或"unfolded".也可以将fold设置为空来禁止代码块折叠.
     也可以在Markdown文件中使用下面的语法来折叠单独的代码块

     {% codeblock "可选文件名" lang:代码语言 >folded %}
     ...代码块内容...
     {% endcodeblock %}

   • 封面 & 缩略图
     在文章的front-matter中添加cover选项:

     title: Icarus快速上手
     cover: /gallery/covers/cover.jpg
     ---
     Post content...

     问题解决记录

2. 无法显示图片,包括封面图片
   访问网站图片显示为方块,网上调查一番,有让装npm模块的,有让使用html标签的,均无效.遂决定自己排查找原因.网站上显示为方块意味着”编译”没有问题,问题可能性最大的是路径不匹配.测试将封面的front-matter中的cover添加为网络图片,更新后发现正常显示封面.路径问题实锤.接下来是找到正确的路径或者是配置路径规则.将图片放在source/_post/post_name, public/img,均不行,但是本地VS code编辑器显示正确,猜测本地与网上解析路径不一致,还是把图片放在source/_post/post_name里,但是在markdown文件里路径去掉post_name/路径改为直接引用.Bingo!
   下一步是封面图片,通过网页的F12键,发现logo之类的图片能够正确找到.虽然本地的cover图片也放在了post_name路径里,无显示,说明front-matter的解析地址规则不一样.猜测与logo图片一致,遂将cover图片放在了/node_modules/hexo-theme-icarus/source/img路径中,更新后正常显示.后续再研究front-matter的地址解析规则设置,考虑封面图片数量有限,所以最终在hexo-theme-icarus/source/新建了存放cover图片的文件夹.

3. About页面显示403无法找到内容
   在Icarus的配置文件找到About的路径为about/即为/source/about/,然后我通过hexo new page命令创建page与文章,结果一直显示403.尝试about与About的大小写问题,路径变化尝试均无效.在官方github的issue里找到问题所在,原来文章的名字不能自己指定要改为index.md,这样转换后才能被About页面识别.

结语

一不小心写了不少内容,内容几乎都是详细的步骤记录与官网教程的转记,希望能帮到像我一样的建站纯小白.

很多功能与优化都没有加进来,后面会持续记录优化的过程.

参考link

icarus教程官网:https://ppoffice.github.io/hexo-theme-icarus/
建站记录1:https://segmentfault.com/a/1190000021503617
建站记录2：http://blog.zhangkexuan.cn/2020/10/25/hexo-aliyun/
其余参考均在内容里的链接.