使用Hexo+Github搭建属于自己的博客

工具:Visual Studio Code/MarkdownPad
技术:Hexo+Github

创建Github项目

  1. Github账户注册和新建项目,项目必须要遵守格式:账户名.github.io,不然接下来会有很多麻烦。并且需要勾选Initialize this repository with a README
  2. 在建好的项目右侧有个settings按钮,点击它,向下拉到GitHub Pages,你会看到那边有个网址,访问它,你将会惊奇的发现该项目已经被部署到网络上,能够通过外网来访问它。

安装Hexo

  1. 在自己认为合适的地方创个文件夹,我是在D盘建了一个blog文件夹。然后在vscode打文件夹
  2. 在vscode中打开终端,输入npm install hexo -g,开始安装Hexo
  3. 输入hexo -v,检查hexo是否安装成功
  4. 输入hexo init,初始化该文件夹(有点漫长的等待。。。)看到后面的“Start blogging with Hexo!”,激动有木有!!!!!
  5. 输入npm install,安装所需要的组件
  6. 输入hexo g,首次体验Hexo
  7. 输入hexo s,开启服务器,访问该网址,正式体验Hexo(假如页面一直无法跳转,那么可能端口被占用了。此时我们ctrl+c停止服务器,接着输入“hexo server -p 端口号”来改变端口号)

将本地blog和Github项目联系起来

  1. 配置Deployment,在其文件夹中,找到_config.yml文件,修改repository值(在末尾)
  2. repository值是你在github项目里的ssh(右下角)

deploy:
  type: git
  repository: [email protected]:ZengGuanBao/ZengGuanBao.github.io.git
  branch: master
  1. 新建一篇博客,在cmd执行命令:hexo new post "博客名"

或者在vscode中新建文件

把新建的文章更新到Github项目上

  1. 在生成以及部署文章之前,需要安装一个扩展:

npm install hexo-deployer-git --save
  1. 使用编辑器编好文章,那么就可以使用命令:hexo d -g,生成以及部署了
  2. 部署成功后访问你的地址:http://用户名.github.io。那么将看到生成的文章

更新主题后,上传没有生效

最后,在查询了一些资料之后,终于知道,这可能是hexo的缓存的问题,也就是你网站根目录的那个db.json文件,还知道了一点,推荐在发布网站之前,先清除缓存,然后再部署网站。
清除缓存的方法:

  • 执行命令:hexo clean
  • 然后可以生成静态博客并在本地预览:hexo d -g

搜索功能

使用站内搜索,安装npm i -S hexo-generator-json-content

分享功能

百度分享不支持Https的解决方案

将static文件夹放在网站的根目录下,并将对应的百度分享代码中,把http://bdimg.share.baidu.com/ 改为 /static/api/js/share.js?v=89860593.js?


<p><i class="fa fa-share"></i>分享到</p>
<div class="bdsharebuttonbox">
  <a href="#" class="bds_more" data-cmd="more"></a>
  <a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
  <a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a>
  <a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a>
  <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
  <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
  <a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
  <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
  <a href="#" class="bds_evernotecn" data-cmd="evernotecn" title="分享到印象笔记"></a>
</div>
<script>
  window._bd_share_config = {
    "common": {
      "bdSnsKey": {},
      "bdText": "",
      "bdMini": "2",
      "bdMiniList": false,
      "bdPic": "",
      "bdStyle": "1",
      "bdSize": "24"
    },
    "share": {},
    "image": {
      "viewList": ["fbook", "twi", "linkedin", "qzone", "tsina", "douban", "weixin", "evernotecn"],
      "viewText": "分享到:",
      "viewSize": "16"
    }
      };
      with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src =
    '/static/api/js/share.js?v=89860593.js?'];
</script>

评论功能

评论功能使用的Valine


<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<script>
    new Valine({
        el: '#valine-thread' ,
        notify: ,
        verify: ,
        app_id: '',
        app_key: '',
        placeholder: '',
        pageSize: '',
        avatar: '',
        avatar_cdn:  '',
        visitor:
    });
</script>
<div id="valine-thread"></div>

原文地址:https://segmentfault.com/a/1190000016789673

原文地址:https://www.cnblogs.com/lalalagq/p/9901649.html

时间: 2024-11-05 22:17:38

使用Hexo+Github搭建属于自己的博客的相关文章

HEXO+Github,搭建属于自己的博客

摘录自:http://www.jianshu.com/p/465830080ea9 1. github的准备 账号 密码 建立Repository建立与你用户名对应的仓库,仓库名必须为[your_user_name.github.io] 建立一个仓库 blog 不要勾选initialize(这一步可有可无 第二种情况) 2.客户端的git安装 3.需要在电脑上建立  ssh 以上可以参照 http://www.cnblogs.com/haimishasha/p/5024772.html 4.客户

Hexo+Github 搭建一个自己的博客

安装前准备: 1.安装Node.js和配置好Node.js环境 2.安装Git和配置好Git环境 安装Hexo: 一.新建一个文件夹安装Hexo环境,输入命令:   npm install hexo-cli -g 二.安装之后,依次输入以下命令: 1.输入 hexo -v,检查hexo是否安装成功 2.输入 cd /     (进入根目录) 3.输入 hexo init minysimp,初始化该文件夹(这一步会比较慢,耐心等待就好^_^) 这里我是重新建了一个自己专属文件夹,将Hexo环境和自

github+hexo+themes搭建简易个性主题博客

0x00  install Node.js and git 安装Node.js:http://www.runoob.com/nodejs/nodejs-install-setup.html 安装git:下载地址:http://git-scm.com/download/ 0x01 安装Hexo 1.在D盘新建个hexo文件夹 $ cd d:/hexo $ npm install hexo-cli -g $ hexo init blog $ cd blog $ npm install $ hexo

《Hexo+github搭建个人博客》

<Hexo+github搭建个人博客> 文/冯皓林 完稿:2016.4.22-2016.4.23 注意:本节教程只针对Windows用户.本教程由无人赞助,赞助写出. <Hexo+github搭建个人博客>1 思维导图总览:2 What?2 简介:2 Hexo:2 NodeJs2 Github4 Git5 Github page:5 Markdown6 How?7 环境配置:7 安装Git8 安装Node.js9 安装hexo13 第一步:打开cmd.13 第二步:进入NodeJS

Hexo+Github搭建博客

作者:桂. 时间:2017-06-10  08:08:04 链接:http://www.cnblogs.com/xingshansi/p/6974267.html 前言 开会开了整整一周,刚下火车回来.打算记录自己看的电影.书籍,记录一些感性的文字,这类信息对公式.排版要求比较简单,想着自己搭建一个基本型博客. 一.环境及软件 A-环境 windows8.1系统 64位 B-软件 1-Node.js 类似javascript,网页制作三件套:html(内容)+CSS(结构布局)+JS(javas

使用Node.js+Hexo+Github搭建个人博客(续)

一.写在前面 在我的上一篇博客<使用Nodejs+Hexo+Github搭建个人博客>中,已经介绍了如何使用 Hexo 在 Github Pages 上搭建一个简单的个人博客.该篇博文将在上篇博文的基础上分别从以下几个方面做简单的后续介绍: 博客相关配置介绍 博客主题 Yilia 配置介绍 如何制作并配置网站缩略图 如何将博客同步到 Github.Coding 中 如何使用 Git 同步 Github 与 Coding 的代码 如何申请域名并作域名解析 如何将域名绑定至 Github.Codi

使用hexo+GitHub搭建个人博客的心得(含教程)

Author Email Yaoyao Liu [email protected] 前言 对于广大CS专业的学生和码农,找一个地方写博客,记录一些编程.配置环境.阅读论文的心得体会是一个很常见的习惯.当然想搭建个人博客,就需要找个靠谱的平台,主要就是以下的两种方式: 使用网站提供的博客平台,例如国内的CSDN.博客园:国外的Blogger.Wordpress 自己建站,发布到自己的服务器上,或者发布到GitHub.GitLab.Bitbucket等支持静态网页发布的git平台 针对于第一种方式,

使用Hexo+Github搭建个人网站

使用Hexo+Github搭建个人网站 通常个人网站搭建最常见的方式: 1.Wordpress:动态网站,功能更强大. 2.Hexo:静态网站,简洁,快速,安全. 各自特点这里不多介绍,这里我们介绍Hexo搭建方法. 首先看这张架构图: 整个流程就是本地将 *.md 渲染成静态文件,然后Hexo Deploy发布到Github的repository,由GithubPages提供服务访问. 1. 基础环境配置 yum install git #安装git https://nodejs.org #安

Hexo + Github 搭建个人主页

全局安装 hexo sudo npm install -g hexo 初始化 新建文件夹,进行初始化,并在本地安装必要组件. hexo init npm install 生成如下目录: . ├── _config.yml ├── node_modules/ ├── package.json ├── scaffolds/ ├── source/ | ├── _drafts | └── _posts └── themes/ _config.yml 站点配置文件,全局配置都在这个文件中. node_m