Mac+Hexo+github搭建myblog完整版

预览:我的成果www.lionsom.com

目录

  • Part One - Hexo本地搭建运行
  • Part Two - github仓库创建和配置
  • Part Three - 本地Hexo关联github
  • Part Four - 绑定域名并设置域名解析
  • Part Five - Hexo日常操作
  • Part Six - Hexo主题更换
  • Part Seven - 实战中的一些问题

Part One - Hexo本地搭建运行


官网

hexo官网
nodejs官网

1.1、Hexo安装的前提

  • Node.js 需要先安装 按照流程安装即可!
  • npm 与Nodejs一起安装完成,不需要单独安装!
  • Git Mac系统自带无需安装

1.2、安装 Hexo

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

注意:此处可能需要root权限

---切换root---
LionsomMBP:~ lionsom$ sudo -I 

---切换lionsom普通用户---
LionsomMBP:~ root# su - lionsom 
npm install -g hexo-cli

1.3、安装Hexo完成,则开始初始化hexo

  • 创建一个文件夹myblog
  • 进入myblog
  • hexo init
hexo init
  • 文件目录结构
文件目录结构

1.4、依赖包与插件的安装

  • 执行以下命令,进行依赖包的安装,

    • node_modules: 关联保存了将会使用到的hexo依赖包
    $ sudo npm install
    
    sudo npm install
  • 安装相关插件

    • 重要:安装便于自动部署到Github上的插件
      $ npm install hexo-deployer-git --save
      
    • 安装atom生成插件,便于感兴趣的小伙伴们订阅
      $ npm install hexo-generator-feed --save
      
    • 安装博客首页生成插件
      $ npm install hexo-generator-index --save
      
    • 安装归档生成插件
      $ npm install hexo-generator-archive --save
      
    • 安装tag生成插件
      $ npm install hexo-generator-tag --save
      
    • 安装category生成插件
      $ npm install hexo-generator-category --save
      
    • 安装Sitemap文件生成插件
      $ npm install hexo-generator-sitemap --save
      
    • 安装百度Sitemap文件生成插件,因为普通的Sitemap格式不符合百度的要求
      $ npm install hexo-generator-baidu-sitemap --save
      

1.5、本地启动Hexo

操作指令一览表

$ hexo clean      #清理缓存
$ hexo generate   #生成静态文件
$ hexo server     #启动本地服务器
或者
$ hexo clean      #清理缓存
$ hexo g          #生成静态文件
$ hexo s          #启动本地服务器
  • 前往myblog目录
$ hexo new "test"
hexo new "test"
  • 在生成路径下查看


    生成路径下查看
  • Hexo本地生成

    $ hexo generate
    
    Hexo本地生成
  • Hexo本地运行

$ hexo s
hexo s
http://localhost:4000/

Part Two - github仓库创建和配置


2.1、github仓库创建

  • 仓库名字必须是『username.github.io』格式;
  • 创建GitHub Pages
GitHub Pages创建

2.2、配置git

  • 设置用户名和邮箱

    $ git config --global user.email "lionsom_lin@qq.com"
    $ git config --global user.name "lionsom"
    
  • 根据邮箱生成密钥 - 如下图,如无特殊需求

    $ ssh-keygen -t rsa -C "lionsom_lin@qq.com"
    
    生成密钥具体操作
  • 查看生成的密钥-在隐藏文件 .ssh 中,其中id_rsa是私钥,id_rsa.pub是公钥

    密钥生成路径

  • ssh-agent代管理git私钥

    • ssh-agent是一个密钥管理器,运行ssh-agent以后,使用ssh-add将私钥交给ssh-agent保管,其他程序需要身份验证的时候可以将验证申请交给ssh-agent来完成整个认证过程。
  • 添加SSH Keyssh-agent

    • 执行命令 获取 agent pid 59566

      $ eval $(ssh-agent -s)
      
    • 添加id_rsa

      $ ssh-add /Users/lionsom/.ssh/id_rsa
      
  • 将生成的公钥 配置到 github

    • 记事本打开id_rsa.pub密钥,复制内容,前往github账户中心Settings,进行如下图操作。
      公钥添加
  • 验证SSH是否配置完成

    $ ssh -T git@github.com
    

    成功则出现

    You've successfully authenticated, but github does not provide shell access.
    

    如图:


    添加是否完成

Part Three - 本地Hexo关联github


3.1、配置_config.yml

具体配置

3.2、前往Hexo本地目录生成静态网页并Deploy到github

  • 确认依赖包和插件安装完成,特别是hexo-deployer-git

    $ npm install hexo-deployer-git --save
    
  • 指令操作

    $ hexo clean  #清理缓存
    $ hexo g      #生成静态文件
    $ hexo d      #部署
    或 $ hexo deploy
    
  • 实际操作图

    • 清理缓存+重新生成静态文件


      清理缓存+重新生成静态文件
    • 部署到github


      部署到github
  • 输入https://lionsom.github.io查看

    部署成功



以上就能实现基本的个人blog




Part Four - 绑定域名并设置域名解析


GitHub为我们每个注册的用户提供了一个唯一的 username.github.io 网址,GitHub服务器会帮我们托管这个 username.github.io 所用到的全部代码,自动运行,所以我们就不需要购买服务器或者云主机来自己运行了。但是,我们之所以购买域名,就是不想总是通过 username.github.io 来访问我们的个人网站,而是希望通过自己的独立域名来访问。把 username.github.io 和自己购买的域名相关联

方法一:(不推荐)

1、进入github项目中的Settings中,找到Github Pages中的Custom domain,输入自己的域名,点击Save即可。

github域名添加

2、查看项目中多了 CNAME 文件

github域名添加成功

3、域名解析

  • 记录类型:CNAME,主机记录:@,记录值一定要是 username.github.io,TTL:一般都是10分钟。
    域名解析

4、检测是否绑定成功

域名解析成功

5、此方法弊端

如果重新generate并deploy,域名与username.github.io关联失效,需要重新设置一遍。

方式二:(推荐)

1、在本地hexo根目录-》source中创建文件『CNAME』,写入域名lionsom.com

操作如图

2、重新部署一次,查看结果

$ hexo clean  #清理缓存
$ hexo g      #生成静态文件
$ hexo d      #部署
多出CNAME文件
解析成功

域名绑定完成!!


Part Five - Hexo日常操作


官网

hexo官网使用-基本操作

5.1、进行常用的配置

5.1.1、layout设置

$ hexo new [layout] <title>

Hexo 有三种默认布局:postpagedraft
默认为 post,可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

5.1.2、文件名称设置

Hexo 默认以标题做为文件名称,但您可编辑 new_post_name 参数来改变默认的文件名称。

# Writing
new_post_name: :year-:month-:day-:title.md

5.1.3、模版(Scaffold)设置

hexo官网使用-Front-matter

front-matter
Scaffold设置

5.1.4、资源设置-图片等

hexo官网使用-资源文件夹

文章资源文件夹

当资源文件管理功能打开后,Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个 markdown 文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后,你可以通过相对路径来引用它们,这样你就得到了一个更简单而且方便得多的工作流。

_config.yml
post_asset_folder: true

使用相对路径进行资源引用:./XXXX.jpg

5.2、创建新blog

$ hexo new blog_name

生成两个文件:blog_name.md 和 blog_name资源文件夹


Part Six - Hexo主题更换


6.1、主题设置

github主题列表地址

hexo-theme-yilia

6.1.1、将主题clone到themes文件夹中

LionsomMBP:myblog lionsom$ cd themes/
LionsomMBP:themes lionsom$ git clone https://github.com/litten/hexo-theme-yilia.git

6.1.2、修改Hexo的_config.yml文件配置

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-yilia

6.1.3、重新加载

显示主题效果

6.2、yilia主题内部设置

  • 直接参考yilia原版配置,参考配置即可!!

  • 具体配置中遇到个小麻烦-目录显示不出来


    目录显示不出来
    • 严格按照上述配置即可!
  • yilia内部资源路径的问题

    • 这里的路径是Hexo根目录下source下点资源,
    • 完整的路径是指Hexo/source/assets/img/wechatpay.jpg
    #你的头像url
    avatar: /assets/img/wechatpay.jpg
    

Part Seven - 实战中的一些问题


7.1、图片资源加载不出来的问题

图片加载异常
图片加载异常

根据上图点结论,所以,资源路径不推荐5.1.4所推荐的设置,依旧推荐在

推荐路径

使用路径 /assets/img/myhead.jpg

7.2、主页面预览,不显示全部内容

推荐路径

我们可以这样解决,打开一篇文章,添加``即可!!!

7.3、设置网页浏览次数

不蒜子

如果你是用的hexo,打开themes/你的主题/layout/_partial/footer.ejs添加即可。

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

# 标签
<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
设置

完结

欢迎指正补充,可联系lionsom_lin@qq.com

原文地址:Mac+Hexo+github搭建myblog完整版

推荐阅读更多精彩内容