如何零成本搭建一个博客

介绍怎么搭建一个网站,如何发布,如何同步到其他平台,如何管理我的文章

挑选一个喜欢的主题

先去网站 https://hexo.io/themes/ 逛逛,应该会花费不少时间。一个美美的网站才是源动力吖。

我选了这款:很有质感,简约而有内涵。

https://github.com/ppoffice/hexo-theme-minos

Github账户

GitHub作为最大的全球交友网站,人手必备一个。


此处必须一直,如果你账户是张三,也必须输入张三

安装hexo

  • npm install -g hexo-cli

  • hexo init [yourBlogName]

  • cd [yourBlogName] && npm install

  • 安装主题

git clone https://github.com/ppoffice/hexo-theme-minos.git themes/minos

本地搭建

  • hexo s

  • 浏览器打开网页:http://localhost:4000

部署

  • 连接github: _config.yml
1
2
3
4
deploy:
type: 'git'
repo: https://github.com/[yourBlogName]/[yourBlogName].github.io.git
branch: 'main'
  • hexo clean 清理缓存

  • hexo g 生成页面

  • hexo d 部署

初始化完成 快快打开 [yourBlogName].github.io.git欣赏下吧。。

写文章

  • 写一篇文章 hexo new post "article title"

  • 写一篇草稿 hexo new draft "article title"

  • 发布文章 hexo p "article title"

添加评论

  • 申请LeanCloud账号并创建应用

  • 进入该应用的 设置->应用凭证,找到 AppID 和 AppKey,记录下来后面配置要用

  • themes\_config.yml下配置

1
2
3
4
5
6
7
8
9
10
11
12
# # Comment plugin settings.
comment:
type: valine
app_id: [appid] # (required) LeanCloud application id
app_key: [appkey] # (required) LeanCloud application key
notify: false # (optional) receive email notification
verify: false # (optional) show verification code
placeholder: # (optional) comment box placeholder text
avatar: hide
pageSize: 10 # pagination size
visitor: true

百度统计访问量

  • 登录百度统计, 定位到站点的代码获取页面

  • 编辑 主题配置文件, 修改字段 baidu_analytics 字段,值设置成你的百度统计脚本 id

1
2
3
4
5
6
7
8
9
10
// `themes\_config.yml`下配置
plugins:
mathjax: true
katex: false
gallery: true
clipboard: true
google-analytics:
tracking_id:
baidu-analytics:
tracking_id: // [复制 hm.js? 后面那串统计脚本 id]

添加打赏

  • 写一个插件donate.ejs 放在页尾
1
2
3
4
5
6
7
8
9
10
11
12

<% if (!index && has_config('donate') && get_config('donate') === true
&& url_for(page.path) !== '/about/index.html' ) { %>
<div id="donate" style="text-align:center; margin-top: 60px;">
<%- get_config('donate_message') %>
<br/>
<img src="<%- url_for(get_config('donate_wx_img')) %>" alt="" style="margin-right: 40px;">
<img src="<%- url_for(get_config('focus_wx_img')) %>" alt="" >
</div>

<% } %>

在配置文件中配置

1
2
3
4
5
6
#是否开启打赏
donate: true
#打赏文案
donate_message: 欣赏此文?求鼓励,求支持!
donate_wx_img: 打赏微信图片地址
focus_wx_img: 关注公众号图片地址

知识版权

https://creativecommons.org/licenses/by-nc-sa/4.0/配置在网站最底部。

原文:https://xuxia2013.github.io/%E5%A6%82%E4%BD%95%E9%9B%B6%E6%88%90%E6%9C%AC%E6%90%AD%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%8D%9A%E5%AE%A2/

添加域名

可以在Github对应repository的Setting里,找到Github Pages, 在Custom domain里填进去自己的域名,保存。
你会发现在repository里,会多出一个名为CNAME的文件,内容是自己的自定义域名的网址。
在Hexo目录里的source文件夹下面,新建一个同样内容、同样名字的CNAME文件即可。

不然你每次Hexo推送GitHub Pages时,会遇到自定义域名失效问题

30岁的人生总结 老项目vue2+webpack3项目升级教程

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×