创建一个github仓库
新建仓库填写仓库信息
这个仓库的名字需要和你的账号对应, 如 linxunfeng.github.io
输入基本信息,然后点击下方的绿色按钮来创建仓库.
填写信息
安装Hexo
需要先在电脑中安装Node.js和git
接下来安装hexo
终端输入:(一定要加上sudo,否则会因为权限问题报错)
sudo npm install -g hexo
cd到你想存放博客的文件夹下,例如我在桌面上的gitHub目录下的一个hexo文件夹
由于这个文件夹将来就作为你存放代码的地方,所以最好不要随便放。
cd /Users/username/Desktop/gitHub/hexo
然后在终端中输入 【hexo init】进行初始化,hexo会自动下载一些文件到这个目录
hexo init
初始化
初始化后目录结构如图
目录结构
启动Hexo
// 是开启本地预览服务
hexo s
启动Hexo
按提示在浏览器下打开
http://localhost:4000/
浏览器
配置Hexo
打开_config.yml,滑到最下面,将deploy的内容修改为如图所示内容
_config.yml
deploy:
type: git
repository: https://github.com/LinXunFeng/linxunfeng.github.io.git
branch: master
repository对应的值可以在这个地方复制过来,也可以自己动手修改上面的配置
repository注意了:hexo的配置文件(不仅仅是_config.yml),只要出现【:】,后面一定要加上个空格,不然会报错
生成静态页面
hexo g
// 或者
hexo generate
生成静态页面
若出现如下报错:
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'
则执行命令:
npm install hexo --save
若无报错,自行忽略此步骤。
此时目录下会多出一个public文件夹,里面存放的就是我们刚刚生成的静态页面
目录结构
上传到github
hexo deploy
// 或者
hexo d
如果执行后报错
Deployer not found: github 或者 Deployer not found: git
则需要我们再安装一个插件:
npm install hexo-deployer-git --save
Deployer not found: git
安装完插件之后再执行一下【hexo d】,它就会开始将public文件夹下的文件全部上传到你的gitHub仓库中
Paste_Image.png如果你之前未关联过Github,则执行hexo deploy命令时终端会提示你输入Github的用户名和密码,按提示输入即可
浏览器中打开网址[https://linxunfeng.github.io/] 显示的页面与http://localhost:4000
一样,这里的https://linxunfeng.github.io 换成你自己的仓库名称
发布文章
终端cd到你的博客文件夹下,执行如下命令新建文章:
hexo new "postName"
名为postName.md的文件会建在目录/blog/source/_posts下。
文章编辑完成后,终端cd到你的博客文件夹下,执行以下两个命令:
hexo generate //生成静态页面
hexo deploy //将文章部署到Github
安装主题
到Hexo官网主题页去寻找你自己喜欢的主题,这里以NexT.Muse为例
终端cd到你的博客文件夹下执行如下命令:
// 将hexo-theme-next这个主题克隆到 ./themes目录下,并修改文件夹名字为next
git clone https://github.com/iissnan/hexo-theme-next themes/next
hexo-theme-next
将_config.yml 里theme的名称landscape修改为next
设置主题然后再执行如下命令(每次部署文章的步骤):
//清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo clean
//生成缓存和静态文件
hexo g
//重新部署到服务器
hexo d
至于更改theme内容,比如名称,描述,头像等去修改./_config.yml文件和./themes/next/_config.yml文件中对应的属性名称即可,不要忘记冒号:
后加空格。详细的介绍请参考NexT 使用文档。
问题小提示
当遇到一些莫名其妙的问题时,可以尝试先执行命令:
sudo npm install
出现问题的行为比如:换了一台MBP ; 不小心执行了【hexo init】等。
出现的问题比如:执行 【hexo g】生成静态页面,并【hexo s】 来开启本地预览的时候,页面只出现
Cannot GET /
此时你会发现publish文件夹下生成的文件有什么缺少了~
网友评论