水不撩不知深浅,人不拼怎知输赢
先安装下面两个软件
Node.js:https://nodejs.org/en/
Git:https://git-scm.com/download/win
接下来安装hexo,使用npm安装hexo
安装命令:npm install -g hexo-cli
安装完了验证一下是否成功
命令:hexo -v
ok 安装完成
接下来我们先用hexo进行本地建站
先初始化Blog网站框架
在本地电脑上建立一个Blog目录,并在shell中进行下面命令,初始化框架:
hexo init <文件夹> //博客文件夹名称
cd <文件夹> //进入博客文件夹目录
npm install
或者直接进入Blog目录中,执行hexo init和npm install (blog目录自己先建好)
都是一样的,不习惯命令的话就用第二种。
_config.yml:
整个站点的配置信息:可以配置网站的title、author、language、目录、文章、日期、分页、扩展(主题名称、部署)信息,这个文件是博客配置文件,改错了会导致网站不正常
source: 资源文件夹,存放用户资源,这个是博客文章源码所存放的地方
themes: 主题文件夹,Hexo会根据此来生成静态页面,默认是官方的landscape主题
先在本地站点调试好,也就是说在所谓的测试环境测试好,再部署到给生产环境(Github)
写Blog文章
执行下面的命令创建一篇新的文章:
hexo new <文章名>
生成的文章在source/_posts文件夹下面
可以看到文章已经生成好了
命令:
$ hexo generate 简写:hexo g
生成静态文件
$ hexo server 简写:hexo s
启动服务器,默认情况下,访问网址为: http://localhost:4000
ok这就是本地搭建成功的效果,不过这是默认主题,可以根据需要改主题
接下来讲GitHub,先注册GitHub账号,这个我就不说了。
设置GitHub SSH Key
本地设置git邮箱、用户名和密码
git config --global user.email "你注册GitHub的邮箱"
git config --global user.name "你的GitHub用户名"
本地创建SSH Key
ssh-keygen -t rsa -C "邮箱地址”
首先打开用户根目录(用户根目录一般为为C:\Users\username)查看是否已经有了SSH Key的文件夹.ssh
ssh 可能隐藏了,所以需要打开隐藏的文件
添加生成的SSH Key到GitHub账户
打开在当前用户的根目录下生成的.ssh文件里面的ssh.pub(ssh 公钥),拷贝其内容到[SSH and GPG keys -> SSH Keys -> Add SSH Key]
验证下SSH是否设置成功
ssh -T git@github.com
第一次提示不能连接,直接输入yes即可
GitHub部署
建立GitHub Pages之后,即可以将本地搭建的Hexo网站部署到GitHub上去
创建存储库,名字就写你GitHub名字+Github.io
如下
命令都敲一遍
这就好了
然后修改一下站点_config.yml配置文件
repo: https://github.com/username/username.github.io.git(你的GitHub页面仓库地址)
branch: master
博客文件夹目录执行命令
Hexo g -d
报错,输入命令
npm install –save hexo-deployer-git
输入命令Hexo g -d部署到GitHub o:p>
访问域名(https://你的GitHub名字.github.io)
模板太丑了,换个模板
Hexo博客根目录打开Shell终端,输入下面命令
git clone https://github.com/iissnan/hexo-theme-next themes/next
下载完成,设置配置文件
这里改下模板的名字
Hexo s 本地搭建看一下效果
这个模板看起来还是很难看,换一个样式
进入模板配置文件
设置改动一下
再看看效果
这样看着就比较舒服
现在使用命令Hexo g -d部署到GitHub上面去
以后写文章直接输入以下命令
hexo new “文章名字”
hexo g -d
下面底部这里改成我们自定义的文字
进入文件夹 themes\next\layout_partials,编辑footer.swig文件
修改一下这两处,再看一下效果
设置友情链接
访问themes\next下面的_config.yml ,找关键字Blog rolls
设置好后效果如下
设置头像
打开文件夹themes\next下的_config.yml文件
搜索关键字Sidebar Avatar
如下图设置
查看效果
使用<!—more–>隔开
网站效果
博客里面如果需要引用图片
可以使用图床,比如 https://sm.ms/ ,调用图片网络地址
或者在public文件夹下面新建一个img文件夹,图片就上传到这个文件夹
然后使用相对路径调用
../../../../img/xxx.jpg
效果图: