最近总算是使用GitHub搭建了自己的博客,趁热乎赶紧来记录下搭建过程~
初步搭建过程
1. 你需要有一个Github的账号,如果没有可以注册,很简单的~
2. 进到Github新建一个项目,项目的名字是自己的用户名+.github.io
,比如我建的项目仓库的名字就是’menggeNiu.github.io’,然后把这个项目仓库克隆到本地,这个操作除了通过终端来进行,还可以使用GitHub Desktop,我觉得后者更加方便。
3. 接下来就是打开克隆到本地的文件夹,我习惯再在里面建一个文件夹,如blog,进入建的文件夹,我们就可以开始安装hexo了。
4. 现在我们开始安装hexo。hexo是在node支持下运行的,如果没有node
可以去官网下载。
安装hexo,命令如下,安装结束之后可以执行hexo -v
来检查是否安装成功。
sudo npm install hero -g
5. hexo初始化,,命令如下,然后会在文件夹里自动生成文件
hexo init
6.config.yml文件配置:deploy字段下面添加
type: git
repo: 域名仓库的https地址
6. 启动本地文件,命令如下,执行之后,终端里会有输出http://localhost:4000/
,在浏览器输入网址,就可以看到在本地跑起来的自己的博客了,当然此时的主题是默认的主题。我感觉也还不错,哈哈~
hexo server
7.发布
7.1 首先安装git,输入如下命令
npm install hexo-deployer-git --save
7.2 再输入如下命令,就文成博客发布了,现在我们可以输入博客域名来看我们自己的博客了~
hexo clean && hexo g && hexo d
创建新的博客文章
1.进入项目所在文件夹,输入下面的命令,执行过后会在source/_posts
文件夹里产生刚才创建的文件,后缀为md。
hexo new 此处为文章的名字
2.写md文件,可以使用Mou,我用下来感觉还是蛮好用的。
3.如果使用Mou写的话,将写完的内容直接复制粘贴到新创建的文件夹中,然后执行命令:
//转义命令
hexo g
4.如果想在本地看效果,再执行命令:
//服务器跑起来
hexo server
5.最后发布,发布命令:
//发布命令
hexo d
6.这样就发布了一篇你的新博客了~怎么样,是不是好开心~有了自己的博客,我是好开心的,哈哈哈~
更换主题
1.首先在github上找到你喜欢的主题。
2.进入到theme文件夹,执行命令:
git clone https://github.com/iissnan/hexo-theme-next
3.执行上列命令之后,下载的主题包就会出现在theme文件夹中,这时,在根目录下的_config.yml
文件中,将theme
后面的字段替换为想要更换主题的字段,然后再hexo clean && hexo g && hexo d
就可以换起新主题啦~当然,有关主题的设置,可以进入到对应主题文件夹根目录下的_config.yml
文件中进行更改,其他样式什么的也可以更改,我暂时还没有改,如果想改的小伙伴可以去对应的css
文件或者其他文件进行更改哦~
添加评论
1.评论系统可以使用duoshuo
。
2.http://duoshuo.com/
进入多说官网,注册,按照步骤逐步完成域名绑定等。
3.绑定成功之后,你的博客的站点会出现在右上角,最左边的选项中,点进去。
4.点击设置,记住域名中的二级域名,即.duoshuo.com
之前的字符串。
5.再回到我们的本地博客文件中,这个评论的设置由于主题的不同而不同,大致的思路就是,在_config.yml
文件中如果没有duoshuo_shortname的填上这个字段,并把刚才记下的二级域名的名字写上,如果主题中有duoshuo
字段的,直接在主题的_config.yml
文件中添加刚才的字段,然后把主题/layout/下面的comments.ejs里面的代码替换为duoshuo的默认代码,代码如下:
<% if (!index && post.comments && config.duoshuo_shortname){ %>
<section id="comments">
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- 多说公共JS代码 end -->
</section>
<% } %>
6.完成之后,再执行如下命令,稍等片刻,我们就可以在自己的博客看到评论功能已经添加进去了~
`hexo clean && hexo g && hexo d`