虽然市面上的博客网站非常的多,但终归不属于自己。每个技术人都有某种情结——我得上手试一试,购买云服务器之后,可以搭建属于自己的博客。
个人博客的框架比较的多,主题也非常的丰富,扩展性也非常的好,能够满足个性化的需求。目前小编在使用的hexo
,它主要有以下的一些特点:
- 渲染速度比较快,官网上称:上百个页面只需要几秒。同时它能生成静态页面,直接用
nginx
,这样不需要启动额外的node
服务,对于1c2g
的服务器算是一个利好。 - 支持
markdown
,markdown
简洁且功能强大。支持插入html
片段,比如加大加粗,标红等,特别符合程序员思维。 - 超强扩展性:
hexo
提供了强大的api
,支持进行扩展。比如seo
需要用到的sitemap
等。
Nodejs安装
hexo
基于node.js
,所以在安装hexo
之前需要安装node.js
和npm
。
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
sitemap
在SEO
中使用非常的多,它用来将网站的页面提交给搜索引擎,这样当用户在搜索引擎搜索关键字的时候,站点的页面才能出现在结果列表里面。需要用到两款插件来生成sitemap
,分别是hexo-generator-sitemap
和hexo-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) { %>
版权声明:<%= post.license_title %>
<% } %>
添加隐私政策
一个正规的博客不能没有隐私政策,免费生成隐私政策的网站很多,可以自行搜索。隐私政策的入口可以放在顶部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;
}
}