How2BlogOnGitHub

能有自己的blog还是可以装以下的, 但对于代码小白来说有点门槛.
这是一篇记录在MacOS上搭建blog系统的过程, 详细记录了搭建基于github Hexo的个人blog的流水账,

$$
0基础,不写代码搞定blog
$$

why use git

Blog应该是装B的有效手段, 局限于没有资源不愿意折腾, 一直没有搭建好. 最近在网上看到了这个方法, 利用Github, 即免费又快捷的方式, 还带域名, 想尝试下, 以便记录下生活中的种种.
以下这片就是记录这个blog的搭建过程.

request

搭建一个简单易用的blog
blog类型: 技巧分享, 工作相关, 生活感悟
标签系统

process

参考: https://www.jianshu.com/p/7210ae6aa451

install git

无脑安装git, 自行百度

git config –global user.name “your name”
git config –global user.email “your email address”

set ssh

1	ssh-keygen -t rsa -C "xxx@yyy.com"

new SSH key on www

install node.js

方法一: brew install node
方法而: https://nodejs.org/en/下载, 再安装

install hexo

hexo是一个台湾人写的插件, 基于node.js, 这也是为什么前面要装. 利用它给blog的搭建带来极大的便利

1	npm install -g hexo-cli

hexo init

cd <Github folder>
hexo init swm00.github.io #我的是blog#
cd swm00.github.io
npm install

hexo deployer

1 2	cd swm00.github.io npm install hexo-deployer-git --save

modify _config.yml:
deploy:
type: git
repo: https://github.com/swm00/swm00.github.io.git
branch: master

1
2
3

hexo clean
hexo g
hexo d

以上几行应该是最常用的命令了

test

本地启动服务:

1 2	cd <your folder> hexo s

然后, 直接在浏览器打开: http://localhost:4000 查看效果

config

详细参考这里:
http://theme-next.iissnan.com/

theme

theme全局设置

用了next这个theme, 需要先安装:

1	git clone git@github.com:theme-next/hexo-theme-next.git themes/next ##使用ssh方式避免了中途未完成结束的问题

详细参考这里: https://theme-next.org/

修改blog的theme, 在站点_config.yml下的theme: next

tags & categories

打开tags, categories

1 2	hexo new page tags hexo new page categories

在对应的index.md文件中, 增加type: tags

avatar

source下增加images目录的avata.png文件
修改config对应的avatar路径

sidebar相关设置:
display: always
position: left

service

1 2	npm install hexo-generator-feed --save npm install hexo-generator-sitemap --save

commnets

用了Valine (原生支持, 国内不会被墙) :

create account leancloud
打开valine的true, 复制AppID和AppKey

参考: https://theme-next.org/docs/third-party-services/comments.html

rss

1	npm install hexo-generator-feed

主题config中打开rss为true

baidu_analyti

create account on baidu analytics
site code getting - hm.js?后面的数字串
粘贴到主题config: baidu_analytics: your_id

参考: https://theme-next.org/docs/third-party-services/statistics-and-analytics.html

图片设置

图片外链花了一些时间才搞定, 应该是hexo有个bug, 需要手工改js, 大致步骤如下:

npm install hexo-asset-image –save
post_asset_folder: true
index.js ref: https://blog.csdn.net/xjm850552586/article/details/84101345
站点_config.yml文件: url: http://swm00.github.io

blog

只要直接用Markdown写, 然后放在Source的_post文件夹下, 然后执行:

hexo g -d

Todo

置顶