虽然市面上的博客网站非常的多,但终归不属于自己。每个技术人都有某种情结——我得上手试一试,购买云服务器之后,可以搭建属于自己的博客。
个人博客的框架比较的多,主题也非常的丰富,扩展性也非常的好,能够满足个性化的需求。目前小编在使用的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配置。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CX2Zije1-1623504270905)(1.png)]
替换网站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) { %>
<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;
}
}
本文详细介绍了如何使用Hexo搭建个人博客,包括Node.js安装、Hexo安装、第一篇博客的创建、主题更换、Logo定制、sitemap生成、原创协议添加、隐私政策配置以及资源文件管理。此外,还分享了如何将博客发布到服务器并配置SSL证书,确保博客的正常运行和SEO优化。

被折叠的 条评论
为什么被折叠?



