简书用着不爽,Wp又太重?试试Hexo搭建自己的博客吧

440 阅读5分钟

  虽然市面上的博客网站非常的多,但终归不属于自己。每个技术人都有某种情结——我得上手试一试,购买云服务器之后,可以搭建属于自己的博客。

  个人博客的框架比较的多,主题也非常的丰富,扩展性也非常的好,能够满足个性化的需求。目前小编在使用的hexo,它主要有以下的一些特点:

  1. 渲染速度比较快,官网上称:上百个页面只需要几秒。同时它能生成静态页面,直接用nginx,这样不需要启动额外的node服务,对于1c2g的服务器算是一个利好。
  2. 支持markdownmarkdown简洁且功能强大。支持插入html片段,比如加大加粗,标红等,特别符合程序员思维。
  3. 超强扩展性:hexo提供了强大的api,支持进行扩展。比如seo需要用到的sitemap等。

Nodejs安装

  hexo基于node.js,所以在安装hexo之前需要安装node.jsnpm

a. windows下安装

  windows下可以直接前往nodejs官网下载安装包,安装的时候请选择全部的组件,并且添加到环境变量。这样npm也安装成功了。

b. Debian和 Ubuntu等linux系统

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

  如果以上命令不行,可以尝试下面的命令

# Using Ubuntu
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

# Using Debian, as root
curl -fsSL https://deb.nodesource.com/setup_16.x | bash -
apt-get install -y nodejs

Hexo安装

  hexo的安装非常的简单,命令如下:

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

第一篇博客

  hexo搭建好之后,就可以开启我们的博客之旅啦!

hexo new first-blog

  执行完命令之后,在source/_posts下,可以看到新建的first-blog.md文件了。

使用说明

替换主题

  hexo拥有非常丰富的主题,可以去官网上进行下载之后放到themes目录下,同时需要修改根目录下的_config.yml里面theme配置。

替换网站logo

  既然是自建的站点,当然需要有自己的logo了。https://hatchful.shopify.com/ 可以免费的帮你设计logo并且支持导出,除了站点logo,还有个人头像,非常的贴心。   站点的logo需要放到主题所在的文件夹中。小编用的landscape主题,所以就放到themes/landscape/source文件夹下面,默认的logo文件名叫favicon.ico,如果你需要改这个名字,可以在landscape文件夹下找到_config_yml文件,修改favicon配置。

生成sitemap

  sitemapSEO中使用非常的多,它用来将网站的页面提交给搜索引擎,这样当用户在搜索引擎搜索关键字的时候,站点的页面才能出现在结果列表里面。需要用到两款插件来生成sitemap,分别是hexo-generator-sitemaphexo-generator-baidu-sitemap,将这两个依赖放到package.json中。

"dependencies":{
    "hexo": "^4.2.1",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-sitemap": "^2.0.0",
    "hexo-generator-baidu-sitemap": "^0.1.6",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^1.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^2.0.0",
    "hexo-renderer-stylus": "^1.1.0",
    "hexo-server": "^1.0.0",
    "hexo-symbols-count-time": "^0.7.1"
  }

  同时,根目录下的_config.yml文件中加上sitemap的配置,执行一下hexo generate,在public文件夹下即可找到sitemap.xml文件了。

sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml
添加原创协议

  在博客被转载的同时,也需要进行一定的约束,这个时候可以配置一下共享协议。博客协议用的比较多的是署名-非商业性使用-禁止演绎 4.0 国际,下面介绍一下如何给每篇博客自动加上协议。   scaffolds文件夹下面有一个post.md,这是博客初始化的模板。在执行hexo new xxx的时候,用这个模板来生成新博客。在这个文件里面添加下面两个配置:

license_title: '署名-非商业性使用-禁止演绎 4.0 国际'
license_url: 'https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh'

在页面渲染的时候,加载这两个配置然后添加到文章的底部。以landscape为例,在themes/landscape/layout/_partial/article.ejs文件中,找到文章显示tags的地方,在tags的下面显示协议,具体的样式可以根据情况进行调整。

<%- partial('post/tag') %>
<% if (post.license_title) { %>
    <br>
    <br>
    <br>
    <a href="<%= post.license_url %>" rel="noopener nofollow">版权声明:<%= post.license_title %>
    </a>
<% } %>
添加隐私政策

  一个正规的博客不能没有隐私政策,免费生成隐私政策的网站很多,可以自行搜索。隐私政策的入口可以放在顶部tab栏,以landscape为例,在landscape目录下面_config.yml配置文件里面有一个menu的选项来控制顶部的tab栏。

menu:
  主页: /
  归档: /archives
  隐私政策: /privacy

  根据上面的配置,隐私政策的路径是/privacy,在source目录下创建一个privacy的文件夹,在privacy文件夹下面新建一个index.md,将生成的隐私文件放到index.md里面,隐私政策就配置完成。

资源文件

  有时博客需要引用一些本地图片,这需要用到资源文件夹。在根目录下的_config.yml文件里面可以将post_asset_folder设置为true,这样当hexo new xxx的时候,除了会生成xxx.md之外,还会生成一个xxx的文件夹,将文章需要使用的图片拷贝到这个文件夹下面,比如1.png,在文章中,直接使用1.png引用即可。

发布到服务器

  hexo可以通过hexo server命令启动一个node服务,同时也可以通过hexo generate生成静态文件。云服务器上已经安装了nginx,使用静态资源就非常的方便了。首先在云服务器上创建一个目录来放博客的静态文件,比如/www/blog/。将public文件夹都拷贝到blog下,修改博客域名对应的nginx的配置,需要注意的是博客的首页是index.html,所以需要把/进行rewrite。下面配置里面还包含了https的内容,如果不清楚如何免费获取https证书,可以参考之前的文章。

server {
  listen 443  ssl;
  ssl_certificate /etc/letsencrypt/live/www.linlan.tech/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/www.linlan.tech/privkey.pem; # managed by Certbot
  ssl_ciphers         HIGH:!aNULL:!MD5;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  server_name *.linlan.tech;

  rewrite  ^/$  /index.html  permanent;
  location / {
    root /www/blog/public;
  }
}