github搭建私人住房博客基础篇,hexo搭建的村办博客

小说导航

  • 中期筹算
  • 安装hexo
  • 修改hexo主题
  • 自定义主题
  • 配置当麻芋果件到github查看
  • 本身的第三篇博客

近来想用GitHub搭建私人住房博客,于是下武功搜索了一番。英特网有为数不少的学科,最后决定用hexo来搭建,因为简单、快捷。本学科只是对总体搭建的记录,以及碰着的局地坑,高手能够一贯跳过。

开卷本文应有所的文化:

先前时代妄图

  • style=”font-size: 1伍px”>下载安装git命令行工具、node及npm环境
  • style=”font-size: 一伍px”>注册自个儿的GitHub账号

表明:本课程针对window蒙受

  • 了解 git 和 github

  • 负有 markdown 语法基础知识

安装hexo

在任性地方右键–>git
bash(以下命令都在gitBash中举行) 输入如下命令

npm install -g hexo

自定义文件夹(比方E:\hexo),在文书夹中右键–>git
bash,该操作会将hexo安装到你钦命的路径

hexo init

先是hexo是一款基于Node.js的静态博客框架,
官方网站传送门,所以你要询问部分node基础;其次是构成github自然要有三个github账号;最终hexo生成的代码上传须要用到git。

一.在 github 建设构造属于本人的 github.io

  • 您要有3个 github 账号,并确立和睦的 github.io
    饭馆,不懂能够查本人那篇小说 《在 github
    上完成页面托管预览作用》

  • 打探 markdown
    语法,轻易入门能够查阅本身那篇文章《怎么样入门简书》

  • 下载和装置git,教程请自行百度

  • 安装了
    node.js
    并精通npm相关基础知识;

设置注重包

npm install

企图干活

1、安装node

2、安装git

3、申请github账号

地方步骤都很轻巧,不现实表明了,不知底赶紧去恶补。

2.配置 github 的 SSH key

怎么要配备那几个啊?因为您付出代码断定要负有你的github权限技术够,可是平素利用用户名和密码太不安全了,所以大家利用ssh
key来缓和地点和服务器的连日难题。

在地头查看是或不是安装成功

hexo g
hexo s

输入完以上命令张开浏览器输入网站localhost:陆仟翻看,运营展现了有关页面表达成功。当前网址创建在地面。

 皇家赌场手机版 1

 

安装hexo

npm install hexo-cli -g

进去放博客的文书夹,推行下边发号施令:

hexo init blog      //
该命令会创造3个blog的文书夹,里面纵使有关布署文件。

cd blog              // 进入blog文件夹

npm install       // 安装package.json里安顿的模块

hexo server     // 运营业地服务,在网页中查看效果。

设置完后跻身文件夹,能够见见如下文件夹及文件:

node_modules   // npm 的设置模块文件

scaffolds           // 布局文件

source              // 财富文件,小说都放在该文件下的_posts

themes             // 主题文件

.gitignore         // git上传忽略文件配置

_config.yml     // 大旨配置文件

github搭建私人住房博客基础篇,hexo搭建的村办博客。package.json    // 描述npm安装包的公文

新建小说:

hexo new [layout] title

layout 即scaffolds 中的文件

hexo new ‘post’  // 新建小说,假如没有点名布局,私下认可新建的是post布局,
新小说在source 下的_posts下

hexo new page ‘node’ //
在文书夹source下,的page下新建二个名叫node的小说,若是未有page文件夹会自动新建一个。

自然也能够手动加多文件和文件夹。

注意:本文是用 git bash 输入全数命令,用 cmd 恐怕会出错

$ cd ~/. ssh #检查本机已存在的ssh密钥

一旦提示:No such file or directory 表达你是率先次使用git。

ssh-keygen -t rsa -C "邮件地址"

只顾:这里的邮件地址指的是您注册 github 的信箱
接下来一连三回回车,最后会生成1个文本在用户目录下,张开用户目录即c:\Users\你的微管理器用户名,找到.ssh文件夹下的id_rsa.pub文件,记事本展开并复制里面包车型地铁内容,张开你的github主页,进入个体设置
-> SSH and GPG keys -> New SSH key:

皇家赌场手机版 2

那边写图片描述

将刚复制的内容粘贴到key这里,title随意填,保存。

ssh -T git@github.com # 注意邮箱地址不用改

假如提醒Are you sure you want to continue connecting (yes/no)?,输入yes,然后会看出:

You’ve successfully authenticated, but GitHub does not provide shell
access.

修改hexo主题

铲除旧文件计划hexo并交付,现在的历次上传提交都以这几行命令

hexo clean
hexo g
hexo d

github上传配置

当在地头写好小说后将要传播github上,上面做连锁配置。

github搭建私人住房博客基础篇,hexo搭建的村办博客。打开_config.yml文件,在最小面找到deploy字段,做如下配置:

deploy:

type: git

repo:
git@github.com:youname/youname.github.io.git(将youname调换你的GitHub名字)

branch: master

下一场实施npm install hexo-deployer-git –save,
安装相关模块,不然上传代码时会报错。

配置Github

创造三个与您用户名一样的库房,如: youname.github.io,youname
换来你的github用户名

在该地git中生成钥密,ssh-keygen -t rsa -C”youremail@example.com”
邮箱换来本身邮箱,然后一齐回车,使用暗许值就能够。假诺1切顺遂的话,能够在用户主目录里找到.ssh目录,里面有id_rsa和id_rsa.pub多少个公文。展开id_rsa.pub,复制里面包车型大巴具备剧情,然后登入GitHub,打开个人的settings,选中SSH
and GPG keys 选项,然后,点NEW SSH
Key,填上任性Title,在文本框里粘贴id_rsa.pub文件的源委。

有关git的用法以及github相关计划不知道能够活动廖雪峰先生的站点学习<传送门>

调换文书上传github

hexo generate  // 浮动静态页面文件夹public

hexo server      // 开启本地服务查看效果(暗中认可端口5000)

hexo deploy     // 将.deploy目录安插到GitHub

hexo clean       // 删除public文件夹

老是上传文件前要先删除public文件夹,在变化静态页面,最终上传github,故实践如下命令:

hexo clean

hexo generate

hexo deploy

开垦你的github,查看youname.github.io文件上传成功没,纵然成功了在网站中张开youname.github.io,查看博客

注:在window情状下,实施hexo deploy命令一定要在git
bash里运维,不能在cmd中运行,不然报错,当时为了这几个难点坑了一把。

碰到的坑:

刚开首win拾上并没不日常,重装系统后,在win10下安装hexo-cli后运维相关命令报了个错,hexo不是内部或外部命令。网络找了壹通,发掘hexo未有布署全局变量。将该路径插足到条件变量C:\Users\youname\AppData\Roaming\npm。在那之中youname换来你Computer的用户名。那是意识hexo命令日常了。实践hexo
s时cmd中唤醒在5000端口查看效果,结果浏览器输入伍仟端口未有成效。网络又煎熬了一番,结果发掘5000端口被攻下了。试行hexo
s -p
123肆事后再123四端口打开就正常了。笔者的微型计算机上伍仟端口被福析阅读器的3个安然无恙程序占用了,叫做foxitprotect.exe的主次,把它杀死后就能够在四千端口上不荒谬显示了。

小技巧:

老是重复上传都要实施者多个指令会很麻烦,能够偷个懒,展开package.json文件,在里面参预scripts字段:

“scripts”: {

    “dev”: “hexo clean && hexo g && hexo d”

}

下一场在git bash 里实行npm run dev就能够一步施行那些操作。

留神,这里一定要输入YES,不然连接不成事

此刻您还须要配备:

$ git config --global user.name "liuxianan"// 你的github用户名
$ git config --global user.email  "xxx@qq.com"// 填写你的github注册邮箱

克隆大旨 

将hexo改成本人喜爱的宗旨,hexo主旨有多数,以下以yilia为例。

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

域名配置

到此博客基本搭建完毕,固然您想要你的博客有个奇特的域名,其实配置12分简单。

一、购买域名

二、配置分析

以万网申请的域名称为例,如图:

皇家赌场手机版 3

三、在在public文件夹下新建名称为CNAME的公文,

在中间填写您的域名,实施hexo d上传代码,输入域名查看效果。

tips:每一回推行hexo clean
后public文件都被删去了,CNAME文件也被删除了,这样每一次都要再度成立这一个文件会很费力。其实化解办法很轻巧,把安顿文件CNAME放在source文件下,重新生成后,你意识在public文件中就有CNAME这些文件了。

皇家赌场手机版,3.使用hexo写博客

$ npm install -g hexo

设置,然后进入你想存放的公文夹,右键 git bash ,输入

$ hexo init

hexo会自动下载一些文件到这几个目录,包罗node_modules,目录结构如下图:

皇家赌场手机版 4

此地写图片描述

$ hexo g # 生成
$ hexo s # 启动服务

hexo s是敞开本地预览服务,张开浏览器访问
http://localhost:4000
就可以看到内容

实施以上命令之后,hexo就能够在public文件夹生成相关html文件,那个文件现在都以要付出到github去的:

皇家赌场手机版 5

此处写图片描述

率先次初叶化的时候hexo已经帮我们写了一篇名叫 Hello World
的稿子,暗许的核心非常丑,张开时正是这几个样子:

皇家赌场手机版 6

此地写图片描述

配置

修改hexo根目录下的 _config.yml : theme:
yilia

更新大旨

cd themes/yilia
git pull
cd ../../

结语

到此博客就搭建落成了,可是对于hexo还有1块很首要的尚未讲,那就是大旨。hexo的精锐体未来它丰裕的大旨。下期就讲一下本身卓殊欣赏的壹款轻松、美貌的宗旨yilia。核心篇已产生[传送门]

四.修改焦点

既然如此暗中认可主旨极难看,那大家别的不做,首先来替换一个雅观点的主旨。那是
官方主旨。

私家对比欣赏的3个大旨:hexo-theme-jekyll 和 hexo-theme-yilia。

先是下载那一个核心:

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

下载的核心存放于theme文件夹中

修改_config.yml中的theme: landscape改为theme: yilia,然后再次推行hexo
g来重新生成。

设若出现部分不三不四的标题,可以西子行hexo
clean来清理一下public的从头到尾的经过,然后再来重新生成和发布。

上传

hexo clean
hexo g
hexo d

5.上传到github

率先,ssh key确定要布局好。

其次,配置_config.yml中有关deploy的部分:

deploy:
  type: git
  repository: git@github.com:liuxianan/liuxianan.github.io.git
  branch: master

安装插件

$ npm install hexo-deployer-git --save

提交,输入一下代码

$ hexo g
$ hexo d

在意:第一回上传之前检查一下根目录是还是不是有.deploy_git文件夹,倘使有将其除去,不然会出现将整体根目录的文件上传。我们要的只是public里面包车型大巴文件

查看

hexo g
hexo s

输入完以上命令打开浏览器输入网站localhost:四千查看,若核心改动了则成功

 

6.写博客

自家写markdown用的是 sublime text 3 编辑器,当然你也得以用别样的。

$ hexo new '你的文章名字'

它会帮我们自动生成 markdown 文件,位于 source_posts
文件夹下,上边是调换的沙盘

---
title: postName #文章页面上的显示名称,一般是中文
date: 2013-12-02 15:30:16 #文章生成时间,一般不改,当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签,可空,多标签请用格式,注意:后面有个空格
description: 附加一段文章摘要,字数最好在140字以内,会出现在meta的description里面
---

以下是正文

小提醒:生成的作品在主页中默许是任何出示的,你也足以在文章中的某处参加“
使其惊人缩短,可以点击阅读详细情况

自定义宗旨细节

修改hexo根目录下的_config.yml文件

title: 你想要的博客标题
author: 你的昵称

修改hexo\themes\yilia目录下的_config.yml文件

avatar: 你的图片链接

七.增添分类

yilia主旨暗中同意的分类是主页和小说,借使小编想增扩展多少个分类,怎么落到实处呢?

在 theme/yilia 文件夹下找到_config.yml 文件,修改 menu

menu:
  主页: /
  随笔: /categories/随笔/
  前端: /categories/前端/
  后端: /categories/后端/

然后在scaffolds文件夹中期维修改post.md文件

---
title: {{ title }}
date: {{ date }}
tags:
---
categories:
随笔
前端
后端
---

封存设置

hexo clean
hexo g
hexo d

注意:你的篇章必须有该分类,点击分类名才有效果,如下边例子的categories

---
title: 简单入门小程序 01
date: 2017-09-27 20:23:13
tags: 小程序
categories: 前端
---
**文 | 小皮咖**

开发本地查看

hexo g
hexo s

 

8.增添博客访问人数和访问量

  • 在theme/yilia/layout/_partial 下的footer.ejs , 在代码最终进入

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

配备当和姑件到github查看

进去github页面点击右上方+开关创立项目 New
repository

皇家赌场手机版 7

 

日增作品访问量

找到 article.ejs
,修改代码,扩展如下代码。地方能够自行选购,但无法放于文首,这样汇合世主页出现一片小说有访问量,别的小说不出新访问量的图景。

<div style="color:#666">

    本文总阅读量次

</div>

你也能够参见作者存放的地点,代码如下:

<article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %> <%if(index){%> article-index<%}%>" itemscope itemprop="blogPost">
  <div class="article-inner">
    <% if (post.link || post.title){ %>
      <header class="article-header">
        <%- partial('post/title', {class_name: 'article-title'}) %>
        <% if (!post.noDate){ %>
        <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
        <% } %>
      </header>
    <% } %>
    <div class="article-entry" itemprop="articleBody">
      <% if (post.excerpt && index){ %>
        <%- post.excerpt %>
        <% if (theme.excerpt_link) { %>
          <a class="article-more-a" href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %> >></a>
        <% } %>
      <% } else { %>
        <%- post.content %>
      <% } %>

      <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>
        <div class="page-reward">
          <a href="javascript:;" class="page-reward-btn tooltip-top">
            <div class="tooltip tooltip-east">

              赏




                  <p class="reward-p"><i class="icon icon-quo-left"></i><%= theme.reward_wording%><i class="icon icon-quo-right"></i></p>
                  <div class="reward-box">
                    <% if(theme.alipay) {%>
                    <div class="reward-box-item">
                      <img class="reward-img" src="<%= theme.alipay%>">
                      支付宝
                    </div>
                    <% } %>
                    <% if(theme.weixin) {%>
                    <div class="reward-box-item">
                      <img class="reward-img" src="<%= theme.weixin%>">
                      微信
                    </div>
                    <% } %>
                  </div>



          </div>
          </a>
        </div>
        <div style="color:#666">

            本文总阅读量次

        </div>
      <% } %>
    </div>
    <div class="article-info article-info-index">
      <%if(post.top){%>
        <div class="article-pop-out tagcloud">
          <i class="icon-tuding"></i>
          <a class="article-tag-list-link color3">置顶</a>
        </div>
      <% } %>

      <%- partial('post/tag') %>
      <%- partial('post/category') %>
      <% if (index && theme.show_all_link){ %>
        <p class="article-more-link">
          <a class="article-more-a" href="<%- url_for(post.path) %>"><%= theme.show_all_link %> >></a>
        </p>

      <% } %>

      <% if (!index && theme.share_jia){ %>
        <%- partial('post/share') %>
      <% } %>
      <div class="clearfix"></div>
    </div>

  </div>

</article>
<% if (!index){ %>
  <%- partial('post/nav') %>
<% } %>
<%- partial('_partial/aside') %>


<% if (!index && post.comments){ %>
  <% if (theme.duoshuo){ %>
  <%- partial('post/duoshuo', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>

  <% if (theme.wangyiyun){ %>
  <%- partial('post/wangyiyun', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>

  <% if (theme.changyan_appid && theme.changyan_conf){ %>
  <%- partial('post/changyan', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>

  <% if (theme.disqus || config.disqus_shortname){ %>
    <section id="comments">
      <div id="disqus_thread"></div>
        <script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = '<%= theme.disqus || config.disqus_shortname %>'; // required: replace example with your forum shortname

        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
          var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
          dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
          (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
      </script>
      <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </section>
  <% } %>

  <% if (theme.gitment_owner && theme.gitment_repo &&theme.gitment_oauth && theme.gitment_oauth.client_id && theme.gitment_oauth.client_secret){ %>
  <%- partial('post/gitment', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>
<% } %>

创造名称

在Repository
name中填入你想要的称谓(建议youname与github名称同样)

皇家赌场手机版 8

Repository name = youname +
.github.io
那事后会是你博客的域名
style=”font-size: 一伍px”>以往做客https://youname.github.io就能够访问你的博客

style=”font-size: 一伍px”>注意:制造项目名称一定假若名字加后缀方式:youname.github.io(笔者在那就被坑过…)

日增访问人数和访问量

找到 left-col.ejs,扩展代码,位置自行选购

<div style="color:#666">

      访问量 
    <br>

      你是第个来到我博客的小伙伴,欢迎你!!٩(๑❛ᴗ❛๑)۶ 

</div>

当然你能够修改上述代码,只要id不要涂改就能够,也足以参考笔者代码地方

<% var defaultBg = '#4d4d4d'; %>
<div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"></div>
<div class="intrude-less">
    <header id="header" class="inner">
        <a href="<%=theme.root%>" class="profilepic">
            <img src="<%=theme.avatar%>" class="js-avatar">
        </a>
        <hgroup>
          <h1 class="header-author"><a href="<%=theme.root%>"><%=theme.author%></a></h1>
        </hgroup>
        <% if (theme.subtitle){ %>
        <p class="header-subtitle"><%=theme.subtitle%></p>
        <%}%>

        <nav class="header-menu">
            <ul>
            <% for (var i in theme.menu){ %>
                <li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
            <%}%>
            </ul>
        </nav>
        <nav class="header-smart-menu">
            <% for (var i in theme.smart_menu){ %>
                <% if(theme.smart_menu[i]){ %>
                <a q-on="click: openSlider(e, '<%-i%>')" href="javascript:void(0)"><%= theme.smart_menu[i] %></a>
                <% } %>
            <%}%>
        </nav>

        <nav class="header-nav">
            <div class="social">
                <% for (var i in theme.subnav){ %>
                    <a class="<%= i %>" target="_blank" href="<%- url_for(theme.subnav[i]) %>" title="<%= i %>"><i class="icon-<%= i %>"></i></a>
                <%}%>
            </div>
            <div style="color:#666">

              访问量 
            <br>

              你是第个来到我博客的小伙伴,欢迎你!!٩(๑❛ᴗ❛๑)۶ 

        </div>
        </nav>

    </header>       
</div>

如上正是 hexo 与 github pages 搭建个人博客的整整课程!希望对你有用~

打听更多 hexo 配置,请移步
《hexo国语文档》

感激小茗同学的《使用hexo+github搭建无需付费个人博客详细教程》,本文大多数剧情据悉他的分享

感谢
‘不蒜子’的
js 脚本,达成了静态文件访问量

本土铺排

配备Github前须求安顿_config.yml文件(在布局此前确认保障git仓库与本土通过ssh连通)

deploy:
type: git
repository: git@github.com:youID/youname.github.io.git
branch: master

留神:属性的冒号和值时期自然要有一个空格(type:空格github)
链接中的youID是你github的名号,youname.github.io是您制造的项目名称

想精晓作者越来越多可在此以前往自个儿的私家博客——小皮咖

提交

hexo g
hexo d

假若提醒:E奥迪Q5RO本田CR-V Deployer not found:
git
实施以下以下命令:npm install
hexo-deployer-git –save

npm install hexo-deployer-git --save

并提交

hexo g
hexo d

现今正是见证神跡的时刻…
开发浏览器输入网站:https://youname.github.io就足以瞥见你的博客了

皇家赌场手机版 9

 

能够看看笔者的博客

 

圆满目录

不要慌,就算未来能够望见博客在网址上,但是还有2个小地点须求通盘
打开git bash 输入

npm i hexo-generator-json-content --save
hexo g
hexo d

本身的率先篇博客

博客以MarkDown言语书写

编纂成文

小说以.md后缀结尾,放在hexo\source_posts文件夹下

提交

hexo g
hexo d

刷新自身的页面就足以看出了

 

  • 小提示:今后修改博客可能新填著作后先用hexo g hexo s命令展开localhost:伍仟探视预览效果再选择是还是不是用hexo g hexo d命令上传github,因为老是上传都是传一整个文书,所以缩短上传次数
  • 以下是上文使用到的下令的简写

    hexo g == hexo generate
    hexo d == hexo deploy
    hexo s == hexo server
    hexo n == hexo new

Leave a Comment.