Day02-在Github上使用Hexo搭建个人博客

Question

Day02-在Github上使用Hexo搭建个人博客

itgoyo opened this issue 7 years ago · comments

编程吴彦祖代码蔡徐坤 commented 7 years ago

成品示例展示：https://itgoyo.github.io/

1、Hexo搭建

环境

一、环境安装

node.js（在node.js官网中下载安装）node.js官网
git（OS系统中直接安装x-code就可以了）
hexo

1）打开OS系统终端

2）输入安装hexo的代码(此处安装时有可能会提示输入系统管理员密码)

$ sudo npm install -g hexo

如果以上命令安装失败的话，换

sudo npm install --unsafe-perm --verbose -g hexo

二、hexo创建静态博客

新建blog文件夹
在终端进入该文件夹，初始化博客

$ hexo init
3. 上述完成后，生成原始文件；blog文件夹就是博客的根目录

本地查看：启用本地服务命令(退出按ctrl+c)

$ hexo s

将出现的地址输入浏览器，即可可查看到本地效果

三、github配置

注册github账号并登陆
获取本机的SSH口令

1）输入获取代码，回车直到出现图片所示图形为止

$ ssh-keygen

2）输入编译代码

$ vim ~/.ssh/id_rsa.pub
3）出现SSH口令后，将红框部分复制，并在下方输入:q，随后按下回车可以退出该窗口

4）进入到github页面设置SSH口令

点击用户下拉菜单中的settings（step1)

点击左侧的SHH and GPG keys（step2)

在Title中输入口令名称（随意）（step3)

在key中贴上SSH口令（step4)

创建新的仓库

1）创建新的仓库（repOSitory）

点击用户左侧的+号菜单中的New repOSitory（step1)

在repOSitory name中输入二级域名，格式请严格遵照username.github.io（step2)

ps：username填写github的登录用户名，否则上线的时候会报错

是否公开选项可以选取Public（step3)

勾选step4处，会自动生成一份可编辑的README.md文件（建议勾选）（step4)

点击create repOSitory生成仓库完毕（step5)

2）查看新建的仓库（repOSitory）

可以回到github个人首页点击右侧的仓库区

进入后在step1处选择并复制http地址，注意此时step2处应该是空的

四、发布博客

设置blog配置文件

1）打开blog文件夹下的_config.yml文件

2）找到最下方的type，输入git（注意冒号后面是带空格的）

3）repo行可能没有，需要自己输入，后面跟上github上仓库中复制的http地址（注意此时1、2两处应该是一样的username），不然上传时会报错

4）其他博客设置

title：博客名称

subtitle：博客副标题

description：博客描述

author：作者

language：语言（简体中文是zh-CN）

在终端上传博客

1）进入终端，输入git上传插件安装代码（安装时会提示输入github用户名及密码）

$ npm install hexo-deployer-git --save
2）安装完毕后，输入获取代码

$ hexo g
3）最后输入上传代码

$ hexo d
4）重新在github仓库查看上传文件，此时在step2中会有之前bolg中生成的文件

5）step3处就是你的博客地址

五、新建与更新博客

新建博客

1）终端bolg文件下，输入新建博客代码

$ hexo new 'filename'

2）此时在bolg/source/_posts/下面会看到新建的博客

3）博客文件的后缀是.md文件，OS下推荐使用MOU编辑器mou下载地址

更新博客

1）完成编辑后，在终端上依次重复以下代码（此时必须先将编辑器关闭，否则会出现获取错误）

$ hexo g
$ hexo d

2）完成后便能刷新博客网页看到新更新的内容了

2、Hexo加入评论功能

Yilia主题（别的主题也是一样的操作）

首先，我们要有一个多说的账号多说(2017-6-1废弃)

然后进入到后台把我们的网站填写进去

在theme/yilia/layout/_partial/post/目录下创建文件名叫：duoshuo.ejs
把以下代码复制进去

<div class="duoshuo">
    <!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="<%=key%>" data-title="<%=title%>" data-url="<%=url%>"></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 -->
</div>

在hexo/_comfig.yml里边添加一下代码（名字换成自己的）

duoshuo_shortname: xxxx(冒号后有空格)

最后在theme/yilia/_config.yml 里边添加以下代码（名字换成自己的）

duoshuo: true
short_name: xxxx  #名字换你自己在多说后台的名字(冒号后有空格)

一共配置两处地方
不然即便是看到评论功能，但是不会保留别人对你的评论

然后重新提交代码刷新即可看到评论功能

Yilia添加Disqus评论

只需要在Yilia主题里边的_config.yml添加一句

disqus_shortname: 你的Disqus账户名称

2、Hexo加入网易云音乐

Yilia主题（我使用的是这个主题就用这个来讲）

进入网易云音乐: 官网

推荐：自己注册账号，这样子可以创建自己喜欢的歌单，在里边收藏自己喜欢的歌曲

然后进入到自己的歌单

点击生成外链，获取到云音乐播放器代码

  <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=300 height=270 src="https://music.163.com/outchain/player?type=0&id=120897804&auto=1&height=430"></iframe>

选择生成自己喜欢的样式，然后复制代码

最后打开（themes/yilia/layout/_partial/left-col.ejs）
把复制好的网易云音乐放到第二行里边(当然这个是我的样式，我选择放在左边，你喜欢放在那里自己选择)

最后的效果图如下

3、Hexo加入百度统计

yilia主题为🌰

编辑文件 themes/yilia/_config.yml ,添加一行配置，可以删除原来的google analytics

baidu_tongji: true

新建 themes/yilia/layout/_partial/baidu_tongji.ejs 内容如下

<% if (theme.baidu_tongji) { %>
<script type="text/javascript">
#申请的百度统计代码
</script>
<% } %>

编辑themes/yilia/layout/_partial/head.ejs 在前添加

<%- partial("baidu_tongji") %>

重新生产部署站点即可。
Light主题
编辑文件 themes/yilia/_config.yml ,添加一行配置，可以删除原来的google analytics

baidu_tongji: true`

新建 themes/light/layout/_partial/baidu_tongji.ejs 内容如下

<% if (theme.baidu_tongji) { %>
<script type="text/javascript">
#申请的百度统计代码
</script>
<% } %>

编辑themes/Yilia/layout/_partial/head.ejs 在前添加

<%- partial("baidu_tongji") %>`

重新生产部署站点即可。

最后多说一句，因为文章是采用Markdown格式编辑的，所以不免会使用到图片的时候，这个时候如果是在跟目录下创建图片文件，这样子搬迁或者复制什么的会很不便，在此我想向大家推荐一个免费的图床
极简图床
只要复制图片粘贴到极简图床，它会自动生成Markdown格式的图片地址

最好申请一个七牛云，这样子就可以创建自己的私密空间。

Ubuntu下

首先安装nodejs

sudo apt-get nodejs

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

出现了相应的版本号了之后
sudo n xxx

提交到Girhub还要安装一个git插件

npm install hexo-deployer-git --save

之前一直报错，然后手贱敲错
npm install hexo-deployer-git --save、
多了一个、居然成功了？！

nmp安装失败

npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm config set proxy null
npm config set proxy=http://127.0.0.1:40242
配置相应的代理即可

邮箱：itgoyo@gmail.com
Good Luck!