Hexo + GitHub 源码管理

Hexo + GitHub 源码管理

从 GitHub 检出托管的 Hexo 静态站点
  • 检出
## 新建目录
mkdir hexo-dev

## 进入 hexo-dev
cd hexo-dev

## 检出 master 分支
git clone https://github.com/mrcuijt/mrcuijt.github.io.git

## 查看检出的仓库
ls ## mrcuijt.github.io

## 进入 mrcuijt.github.io 目录
cd mrcuijt.github.io

## 查看仓库状态
git staus

## 查看仓库提交日志
git log
创建新的 dev 空白分支
## 创建新的空白分支,分支名称为 dev
git checkout --orphan dev
删除当前目录空白分支下全部文件
## 查看空白分支状态
git status
## 删除文件
git rm -rf ./
## 查看空白分支状态
git status
提交 Hexo 源码到 dev 分支
  • 将 Hexo 目录下的文件拷贝到 mrcuijt.github.io 目录下
## mrcuijt.github.io 目录结构
.deploy_git
.gitignore
db.json
node_modules
package-lock.json
package.json
public
scaffolds
source
tags
themes
_config.yml
  • 提交代码到本地 dev 分支
## 添加要提交的文件
git add .

## 提交
git commit -m "1、Hexo Dev Init"
  • 提交代码到远程 dev 仓库分支
git push --set-upstream origin dev

完成

注意事项
  • Windows 系统下的 Git 默认设置对大小写不敏感

在修改 文章 分类的大小写后,在 GitHub 上展示出来的仍然是小写

  • 解决方案

    • 博客文件夹中找到 .deploy_git 文件夹,进入 .git 文件夹

      • 编辑 config 文件,设置 ignorecase = false
    • 博客目录进入 .git 文件夹

      • 编辑 config 文件,设置 ignorecase = false

Hello World

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

$ hexo new "My New Post"

More info: Writing

Run server

$ hexo server

More info: Server

Generate static files

$ hexo generate

More info: Generating

Deploy to remote sites

$ hexo deploy

More info: Deployment

Hexo 博客配置 landscape 主题

添加 ICON

修改在 themes/landscape 目录下的 _config.yml 主题样式配置文件

将其中的 favicon 设置为 /favicon.ico

# Miscellaneous
google_analytics:
gauges_analytics:
favicon: /favicon.ico
twitter:
google_plus:
fb_admins:
fb_app_id:

将自己的 favicon.ico 放到 themes/landscape/source 目录下即可

添加 RSS

_config.yml 全局配置文件中有默认的 RSS 设置,默认留空。这时使用 Hexo 生成的 Feed 链接,需要先安装 hexo-generator-feed 插件。

## 安装 hexo-generator-feed
cnpm install --save hexo-generator-feed

修改全局配置文件,在最后添加以下代码

# RSS 订阅插件
feed: 
  type: atom
  path: atom.xml
  limit: 0

plugins: hexo-generate-feed

添加阅读统计

添加 不蒜子 浏览数统计

  • 修改 themes\landscape\layout_partial\after-footer.ejs
<% if (config.busuanzi_count.enable){ %>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<% } %>
  • themes\landscape\layout_partial\ 下,添加 busuanzi_count.ejs
<!-- busuanzi_count -->
<% if (config.busuanzi_count.enable){ %>
<span id="busuanzi_container_page_pv">
  本文总阅读量<span id="busuanzi_value_page_pv"></span>次
</span>
<% } %>
<!-- busuanzi_count -->
  • 修改 themes\landscape\layout_partial\article.ejs

    在 footer 标签尾部添加对 busuanzi_count.ejs** 的引用

    <footer class="article-footer">
      <a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link"><%= __('share') %></a>
      <% if (post.comments && config.disqus_shortname){ %>
        <a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comment') %></a>
      <% } %>
      <%- partial('post/tag') %>
      <%- partial('busuanzi_count') %>
    </footer>
  • 修改 themes\landscape\layout_partial\footer.ejs
<footer id="footer">
  <% if (theme.sidebar === 'bottom'){ %>
    <%- partial('_partial/sidebar') %>
  <% } %>
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %><br>
      <!-- busuanzi_count -->
      <% if (config.busuanzi_count.enable){ %>
      本站总访问量<span id="busuanzi_value_site_pv"></span>次
      本站访客数<span id="busuanzi_value_site_uv"></span>人次<br>
      <% } %>
      <!-- busuanzi_count -->
      <%= __('powered_by') %> <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>

添加文章评论功能

NexT 支持的第三方的评论系统有很多,不过不少已经关闭不再可用了,而且对于国内来说比较友好的现在应该就只有来必力

注册后点击导航上边的安装,选择免费的 city 版本.

  • themes\landscape\layout_partial\ 下添加 livere.ejs
<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="">
<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
</script>
<noscript> 为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->
  • 修改 themes\landscape\layout_partial\article.ejs

    在 footer 标签尾部添加对 livere.ejs 的引用

    <footer class="article-footer">
      <a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link"><%= __('share') %></a>
      <% if (post.comments && config.disqus_shortname){ %>
        <a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comment') %></a>
      <% } %>
      <%- partial('post/tag') %>
      <% if (!index){ %>
        <%- partial('livere') %>
      <% } %>
    </footer>

效果如下:

来必力用户评论

添加文章目录

一、下载解压 toc

下载 toc.zip

## 解压得到
css
js
post
widget

二、修改 Hexo 主题

  • widget 下的文件添加到 themes\landscape\layout_widget 目录下

    • 修改 Hexo 主题配置文件 _config.yml

    在 Sidebar 后添加一个 toc

# Sidebar
sidebar: right
widgets:
- category
- tag
- tagcloud
- archive
- recent_posts
- toc
  • post 下的文件添加到 themes\landscape\layout_partial\post 目录下

    • 修改 themes\landscape\layout_partial\article.ejs

    <%- post.content %> 上面添加 <%- partial('post/toc') %>

    <div class="article-entry" itemprop="articleBody">
      <% if (post.excerpt && index){ %>
        <%- post.excerpt %>
        <% if (theme.excerpt_link){ %>
          <p class="article-more-link">
            <a href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %></a>
          </p>
        <% } %>
      <% } else { %>
        <%- partial('post/toc') %>
        <%- post.content %>
      <% } %>
    </div>
  • css 下的文件添加到 themes\landscape\source\css_partial\post 目录下

  • 修改 themes\landscape\source\css\style.styl 文件

    使用相对路径添加样式的导入

@import "_partial/post/toc"
  • js 下的文件添加到 themes\landscape\source\js目录下

    • 修改 themes\landscape\layout_partial\after-footer.ejs
<!-- Toc -->
<%- js('js/toc') %>
<!-- Toc -->

添加看板娘

一、下载解压 live2d 插件

看板娘插件 live2d.zip

## 解压得到
css
js
model

二、修改 Hexo 全局 _config.yml 配置文件

  • 在最下方添加 Live2D 配置
## 开始
Live2D: 
   enable: true ## 启用 Live2D
   modules: pio/,xuexiaoban/ ## 设置 live2d 模块模型
   basic_module_path: http://localhost:4000/live2d/modules/
   message_Path: http://localhost:4000/live2d/message/
   home_Path: http://localhost:4000/
## 结束

三、修改 Hexo landscape 主题模板引入 Live2D

  • themes\landscape\layout_partial\live2d\ 目录下,添加 live2d.ejs
<!-- Live2D -->
<% if (config.Live2D.enable){ %>
<div id="landlord">
    <div class="message" style="opacity:0"></div>
    <canvas id="live2d" width="280" height="250" class="live2d" style="opacity:0;"></canvas>
    <div class="hide-button">隐藏</div>
    <div class="switch-button">变装</div>
    <div class="change-button">切换</div>
</div>
<script type="text/javascript">
    var nospecialtip = true;
    var nohitokoto = true;
    var modules = "<%- config.Live2D.modules %>".split(",");
    var basic_module_path = "<%- config.Live2D.basic_module_path %>";
    var live2d_Path = basic_module_path + modules[0];
    var message_Path = "<%- config.Live2D.message_Path %>";
    var home_Path = "<%- config.Live2D.home_Path %>";
</script>
<% } %>
<!-- Live2D -->
  • 修改 themes\landscape\layout_partial\footer.ejs

    • 添加对 live2d.ejs 的引用。
<footer id="footer">
  <!-- live2d -->
  <%- partial('live2d/live2d') %>
  <!-- live2d -->
  <% if (theme.sidebar === 'bottom'){ %>
    <%- partial('_partial/sidebar') %>
  <% } %>
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %><br>
      <%= __('powered_by') %> <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
  • js 目录下的文件添加到 themes\landscape\source\js\live2d 目录下

    • 修改 themes\landscape\layout_partial\after-footer.ejs

    在最底部以相对路径方式添加对 Live2D 的引用

<!-- Live2D -->
<% if (config.Live2D.enable){ %>
  <%- js('js/live2d/live2d') %>
  <%- js('js/live2d/message') %>
  <%- js('js/live2d/run_local') %>
<% } %>
<!-- Live2D -->
  • css 目录下的文件添加到 themes\landscape\source\css\live2d 目录下

    • 修改 themes\landscape\source\css\style.styl 文件

    使用相对路径添加样式的导入

@import "live2d/live2d"
  • model 目录下的文件添加到 themes\landscape\source\live2d 目录下

四、启动 Hexo 查看效果

## 本地启动 hexo
hexo s

访问 http://localhost:4000/ 查看效果

看板娘

参考链接:

更多 live2d 模型下载 梦象

Hexo + GitHub 搭建个人博客

第一步:环境配置

本地需要安装 NodeJSGit

检查是否安装成功

## Git
git --version

## NPM
npm -v

## NodeJS
node -v
安装 Hexo 框架
## 安装 CNPM 设置淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

## 安装 Hexo
cnpm install -g hexo-cli

## 验证是否安装成功
hexo -v

第二步:本地创建项目

自建一个文件夹 然后进入文件下 比如 D:/hexo ,把 Hexo 安装进该文件夹里

## 进入 hexo 目录
cd D:\hexo

## 初始化 hexo
hexo init

## hexo 项目目录结构
## D:/hexo
## │   .gitignore
## │   package-lock.json
## │   package.json
## │   _config.yml
## │   
## ├───node_modules
## │               
## ├───scaffolds
## │       
## ├───source
## │           
## └───themes

## 本地运行 hexo 访问 http://localhost:4000
hexo s

## INFO  Start processing
## INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
新建文章

另打开一个 cmd 到 D:\hexo 目录下

## 创建一个新的文件,名为 demo
## 访问 http://localhost:4000 可以看到新添加 demo 文章
hexo n demo

## 主动生成
hexo g

## 清理已生成资源
hexo clean

第三步:部署到 GitHub

一、安装 hexo-deployer-git 模块

## 打开 cmd 到 D:\hexo 目录下
cd D:\hexo

## 安装 hexo-deployer-git
npm install hexo-deployer-git

二、GitHub 仓库配置

  • new repository 新建仓库

  • 用户名.github.io 必须是这个格式,就会自动创建站点,完成即可

三、修改 hexo 配置文件

## _config.yml

## 定位到 Deployment
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

## 需改为如下配置
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/mrcuijt/mrcuijt.github.io.git
  branch: master
  • repo 修改为自己的 GitHub 仓库地址

四、发布到 GitHub

## 发布到 GitHub
hexo d

## 如果是首次安装 Git 会提示输入 GitHub 的用户名和密码进行登录

## 访问 https://mrcuijt.github.io 

index

目录

Hello World

Image

@WebService(endpointInterface="com.mycompany.Library")
public class LibraryImpl implements Library {
    private static Map<Integer, Book> store = new HashMap<Integer, Book>();
    private static int currentId=0;

    @Override
    public Book addBook(Book book) {
        book.setId(++currentId);
        store.put(book.getId(), book);
        return book;
    }

    @Override
    public Book getBook(int id) {
        return store.get(id);
    }

    @Override
    public Book[] getBooksArray() {
        List<Book> l = new ArrayList<Book>();
        Iterator<Integer> it = store.keySet().iterator();
        while(it.hasNext()) {
            l.add(store.get(it.next()));
        }
        Book[] r = l.toArray(new Book[1]);
        System.out.println(r.length);
        return r;
    }

    @Override
    public List<Book> getBookList() {
        List<Book> l = new ArrayList<Book>();
        Iterator<Integer> it = store.keySet().iterator();
        while(it.hasNext()) {
            l.add(store.get(it.next()));
        }
        return l;
    }

    @Override
    public Map<Integer, Book> getBookMap() {
        return store;
    }

    @Override
    public boolean deleteBook(int id) {
        if (store.containsKey(id)) {
            store.remove(id);
            return true;
        } else {
            return false;
        }
    }
}
隐藏
变装
切换
modules : pio/,xuexiaoban/