如何零成本搭建一个博客

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

挑选一个喜欢的主题

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

我选了这款：很有质感，简约而有内涵。

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CcyroNIv-1663291123927)(https://s6.jpg.cm/2022/09/09/PXJ2o6.png)]

Github账户

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

创建一个库 https://github.com/new

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wa7mRfI6-1663291123928)(https://s6.jpg.cm/2022/09/09/PXJjjh.png)]

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

安装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

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下配置

# # 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

// `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 放在页尾


<% 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="" width="180" style="margin-right: 40px;">
    <img src="<%- url_for(get_config('focus_wx_img')) %>" alt="" width="180">
  </div>

<% } %>

在配置文件中配置

#是否开启打赏
donate: true
#打赏文案
donate_message: 欣赏此文？求鼓励，求支持！
donate_wx_img: 打赏微信图片地址
focus_wx_img: 关注公众号图片地址

知识版权

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