导航
导航
文章目录󰁋
  1. 第一部分 基本介绍
  • 为什么选择GitHub Pages?
    1. 第二部分 Hexo+GitHub搭建博客
  • hexo命令行使用
    1. 第三方服务
    2. 至此,基本操作介绍完毕,以下内容普通用户无需了解
    3. 问题详解
  • 总结
  • 参考:
  • 关注作者公众号

    和万千小伙伴一起学习

    公众号:前端进价之旅

    Hexo+GitHub搭建免费博客

    第一部分 基本介绍


    一直想自己搭建一个博客,断断续续,折折腾腾了两天多的多时间,终于算是搭建完毕了.

    为什么要搭建博客呢?

    • 想有个属于自己的博客空间
    • 世面上的平台不够好看
    • 佩服那些有博客的人,所以自己也想搞一个
    • 独立的才是自己的。
    • 但是不懂服务器,没有空间,不懂前端怎么破?

    小白进入门槛
    1、非常折腾,需要耐心;
    2、也需要一定的学习能力和钻研精神;
    3、懂一些网页基础知识

    本博客是利用 Hexo +Github搭建,主题是 Next ,感觉不错,不需要什么上面所说的知识,也能搭建成功,方便也美观

    为什么选择GitHub Pages?

    很多人用wordpress,你为什么要用github pages来搭建?

    • github pages有300M免费空间,资料自己管理,保存可靠;
    • 学着用github,享受github的便利,上面有很多大牛,眼界会开阔很多;
    • 顺便看看github工作原理,最好的团队协作流程;
    • github是趋势;
    • 就算github被墙了,我可以搬到国内的gitcafe中去。

    搭建需要懂得github基本操作

    不会GitHub的参考如下文章:

    第二部分 Hexo+GitHub搭建博客


    环境准备

    • 安装Node
      到Node.js官网下载相应平台的最新版本,一路安装即可

    • 安装Git

    • GitHub

      • 首先注册一个『GitHub』帐号,已有的默认默认请忽略
      • 建立与你用户名对应的仓库,仓库名必须为『your_user_name.github.com』
      • 添加SSH公钥到『Account settings -> SSH Keys -> Add SSH Key』
    • 首先设置你的用户名密码:
      git config --global user.email "4353@qq.com"
      git config --global user.name "653b"

    • 生成密钥:
      ssh-keygen -t rsa -C "faa@qq.com"

      最后可以验证一下:ssh -T git@github.com

    • 安装

    Node和Git都安装好后,可执行如下命令安装hexo:

    npm install -g hexo

    • 初始化

    执行init命令初始化hexo到你指定的目录:
    hexo init <folder> 也可以cd到目标目录,执行hexo init。

    至此,全部安装工作已经完成!

    • 生成静态页面

    cd 到你的init目录,执行如下命令
    hexo generate

    • 本地启动

    执行如下命令,启动本地服务,进行文章预览调试

    hexo server
    浏览器输入http://localhost:4000就可以看到效果


    • 写文章

    执行new命令,生成指定名称的文章至hexo\source_posts\postName.md

    hexo new [layout] "postName" #新建文章

    其中layout是可选参数,默认值为post。有哪些layout呢,请到scaffolds目录下查看,这些文件名称就是layout名称。当然你可以添加自己的layout,方法就是添加一个文件即可,同时你也可以编辑现有的layout,比如post的layout默认是hexo\scaffolds\post.md
    
    title: { { title } }
    date: { { date } }
    tags:

    想添加categories,以免每次手工输入,只需要修改这个文件添加一行,如下:

    title: { { title } }
    date: { { date } }
    categories:
    tags:
    ---

    接下来,你就可以用喜爱的编辑器尽情书写你的文章

    实现fancybox效果

    只需要在你的文章*.md文件的头上添加photos项即可,然后一行行添加你要展示的照片:

    layout: photo
    title: 我的阅历
    date: 2085-01-16 07:33:44
    tags: [hexo]
    photos:
    - http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
    - http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg

    不想每次都手动添加怎么办?同样的,打开您的hexo\scaffolds\photo.md

    >layout: { { layout } }
    title: { { title } }
    date: { { date } }
    tags:
    photos:

    然后每次可以执行带layout的new命令生成照片文章:

    hexo new photo "photoPostName" #新建照片文章

    • 主题安装

    hexo的主题列表Hexo Themes
    比较喜欢pacmanmodernist、next。Pacman最为优秀,简洁大方小清新,同时移动版本支持的也很好

    安装主题的方法就是一句git命令:

    git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist

    安装完成后,打开hexo\_config.yml,修改主题为modernist

    打开hexo\themes\modernist目录,编辑主题配置文件_config.yml:

    • 更新主题

    cd themes/modernist
    git pull

    hexo命令行使用

    常用命令:

    • hexo help #查看帮助
    • hexo init #初始化一个目录
    • hexo new "postName" #新建文章
    • hexo new page "pageName" #新建页面
    • hexo generate #生成网页,可以在 public 目录查看整个网站的文件
    • hexo server #本地预览,’Ctrl+C’关闭
    • hexo deploy #部署.deploy目录
    • hexo clean #清除缓存,**强烈建议每次执行命令前先清理缓存,每次部署前先删除 .deploy

    简写:

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

    第三方服务


    • 图床

    1.墙裂推荐七牛云储存,注册地址。
    2.七牛云储存提供10G的免费空间,以及每月10G的流量.存放个人博客图片最好不过了
    具体使用见使用七牛作为github博客的图床

    • 域名
    • 将独立域名与GitHub Pages的空间绑定
    • 方法一:在站点source目录下面,新建一个名为CNAME的文本文件,里面写入你要绑定的域名,比如wuxiaolong.me
    • 方法二:在Repository的根目录下面,新建一个名为CNAME的文本文件,里面写入你要绑定的域名,比如wuxiaolong.us
    • DNS设置
      用DNSpod,快,免费,稳定。
      注册DNSpod,添加域名,如下图设置。

    其中A的两条记录指向的ip地址是github Pages的提供的ip
    如何知道你的github上项目的IP

    去Godaddy修改DNS地址
    更改godaddy的Nameservers为DNSpod的NameServers。

    至此,基本操作介绍完毕,以下内容普通用户无需了解


    • 目录介绍

    默认目录结构:

    ├── .deploy
    ├── public
    ├── scaffolds
    ├── scripts
    ├── source
    | ├── _drafts
    | └── _posts
    ├── themes
    ├── _config.yml
    └── package.json
    • .deploy:执行hexo deploy命令部署到GitHub上的内容目录
    • public:执行hexo generate命令,输出的静态网页内容目录
    • scaffolds:layout模板文件目录,其中的md文件可以添加编辑
    • scripts:扩展脚本目录,这里可以自定义一些javascript脚本
    • source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。
      • _drafts:草稿文章
      • _posts:发布文章
    • themes:主题文件目录
    • _config.yml:全局配置文件,大多数的设置都在这里
    • package.json:应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于按钮
    • 修改局部页面

    页面展现的全部逻辑都在每个主题中控制,源代码在hexo\themes\你使用的主题\中,以modernist主题为例:

    ├── languages          #多语言
    | ├── default.yml #默认语言
    | └── zh-CN.yml #中文语言
    ├── layout #布局,根目录下的*.ejs文件是对主页,分页,存档等的控制
    | ├── _partial #局部的布局,此目录下的*.ejs是对头尾等局部的控制
    | └── _widget #小挂件的布局,页面下方小挂件的控制
    ├── source #源码
    | ├── css #css源码
    | | ├── _base #*.styl基础css
    | | ├── _partial #*.styl局部css
    | | ├── fonts #字体
    | | ├── images #图片
    | | └── style.styl #*.styl引入需要的css源码
    | ├── fancybox #fancybox效果源码
    | └── js #javascript源代码
    ├── _config.yml #主题配置文件
    └── README.md #用GitHub的都知道
    • 插件

    • 安装插件:npm install <plugin-name> --save
    • 启用插件:在*hexo_config.yml文件添加:
    • plugins: - <plugin-name> #插件名
    • 升级插件: npm update
    • 卸载插件:npm uninstall <plugin-name>
    • 迁移
      hexo支持从其他类型站点迁移,如通用RSS,Jekyll,Octopress,WordPress等。请参考官方文档Hexo Migration
    • 更新
      • 更新hexo:npm update -g hexo
      • 更新主题:cd themes/你的主题 git pull
    • 换机器写博客

    保留好自己的博客源码。换机器写博客,就只能使用各种网盘的同步功能,或者你把你的站点源文件提交到某代码托管服务器。另外,貌似这篇很牛逼,Hexo 服务器端布署及 Dropbox 同步

    办法是这样的,先在一个目录下做好Node+Git+Hexo的绿色环境,写个hexos.bat可以一键启动hexo工作台,把整个目录用Dropbox同步,这样随便在办公室或家的任何笔记本台式机都可以写博客,也不用处理什么文件拷贝备份的事情

    问题详解


    总结


    • 对于一个不懂什么服务器,什么前端的人来说,Hexo+Github给搭建个人博客带来了很大的便利.
    • 搭建博客不是心血来潮,也并不是一帆风顺的,所以需要耐心,折腾得起才行.
    • 很多教程已经过时,多看官方文档.
    • 搭建博客并不是必须,写笔记文章找个平台也是可以的.
    • 搭建博客才是第一步,坚持写好文章才是关键,路还很长.

    参考:

    支持一下
    扫一扫,支持poetries
    • 微信扫一扫
    • 支付宝扫一扫