Hexo+GitHub搭建博客

作者: 一觉睡到丶小时候 | 来源:发表于2019-07-11 16:42 被阅读3次

    前言

    使用github pages服务搭建博客的好处有:

    全是静态文件,访问速度快;
    免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台;
    可以随意绑定自己的域名,不仔细看的话根本看不出来你的网站是基于github的;
    数据绝对安全,基于github的版本管理,想恢复到哪个历史版本都行;
    博客内容可以轻松打包、转移、发布到其它平台

    准备工作

    安装git(用来进行文章的发布)

    访问 https://git-scm.com/download/win,点击 64-bit Git for Windows Setup进行下载

    git.png

    下载完成之后双击exe文件,之后根据提示一路下一步完成安装即可。

    安装node.js(hexo所需要的环境)

    访问 https://nodejs.org/en/,下载左边的推荐版本

    nodejs.png

    下载完成之后根据提示一路下一步完成安装即可。

    创建仓库

    新建一个名为你的用户名.github.io的仓库,比如说,如果你的github用户名是test,那么你就新建test.github.io的仓库(必须是你的用户名,其它名称无效),将来你的网站访问地址就是 http://test.github.io 了。每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库。

    注册的邮箱一定要验证,否则不会成功;
    仓库名字必须是:username.github.io,其中username是你的用户名;
    仓库创建成功不会立即生效,需要过一段时间,大概10-30分钟,或者更久;

    配置SSH key

    为什么要配置这个呢?因为你提交代码肯定要拥有你的github权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题。
    用git bash执行如下命令:

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

    如果提示:No such file or directory 说明你是第一次使用git。

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

    然后连续3次回车,最终会生成一个文件在用户目录下,打开用户目录,找到.ssh\id_rsa.pub文件,记事本打开并复制里面的内容,打开你的github主页,进入个人设置 -> SSH and GPG keys -> New SSH key:


    github.png
    图片.png
    测试是否成功
    ssh -T git@github.com # 注意邮箱地址不用改
    

    如果提示Are you sure you want to continue connecting (yes/no)?,输入yes,然后会看到:

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

    看到这个信息说明SSH已配置成功!
    此时你还需要配置:

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

    hexo

    Hexo是一个简单、快速、强大的基于 Github Pages 的博客发布工具,支持Markdown格式,有众多优秀插件和主题。

    官网: http://hexo.io
    github: https://github.com/hexojs/hexo
    由于github pages存放的都是静态文件,博客存放的不只是文章内容,还有文章列表、分类、标签、翻页等动态内容,假如每次写完一篇文章都要手动更新博文目录和相关链接信息,相信谁都会疯掉,所以hexo所做的就是将这些md文件都放在本地,每次写完文章后调用写好的命令来批量完成相关页面的生成,然后再将有改动的页面提交到github。

    很多命令既可以用Windows的cmd来完成,也可以使用git bash来完成,但是部分命令会有一些问题,为避免不必要的问题,建议全部使用git bash来执行

    安装
    npm install -g hexo
    
    初始化

    在电脑的某个地方新建一个名为hexo的文件夹(名字可以随便取),比如我的是F:\Workspaces\hexo,由于这个文件夹将来就作为你存放代码的地方,所以最好不要随便放。

    $ cd /f/Workspaces/hexo/
    $ hexo init
    

    初始化完成之后,可以看到在指定目录下生成了以下文件


    图片.png
    安装部署到github插件依赖
    npm install –save hexo-deployer-git
    

    我们可以通过_config.yml文件完成对站点的配置,可以访问https://hexo.io/zh-cn/docs/configuration.html获得每个配置项的用途描述

    # Hexo Configuration
    ## Docs: https://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/
    # 标题
    title: 博客网站名
    # 副标题
    subtitle: 
    # 网站描述
    description: 
    #作者
    author: username
    # 语言
    language: zh_CN
    # 时区
    timezone:
    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    # 博客全路径
    url: http://localhost:4000/blog
    # 博客根路径
    root: /blog/
    # 文章的链接格式,年月日标题
    permalink: :year/:month/:day/:title/
    # 默认值
    permalink_defaults:
    # Directory
    # 资源文件夹,这个文件夹用来存放内容。
    source_dir: source
    # 公共文件夹,这个文件夹用于存放生成的站点文件。
    public_dir: public
    # 标签文件夹
    tag_dir: tags
    # 归档文件夹
    archive_dir: archives
    # 分类文件夹
    category_dir: categories
    # Include code 文件夹
    code_dir: downloads/code
    # 国际化(i18n)文件夹
    i18n_dir: :lang
    # 跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。
    skip_render:
    # Writing
    # 新文章的文件名称
    new_post_name: :title.md # File name of new posts
    # 默认模版
    default_layout: post
    # 把标题转换为 title case
    titlecase: false # Transform title into titlecase
    # 在新标签中打开链接
    external_link: true # Open external links in new tab
    # 把文件名称转换为 (1) 小写或 (2) 大写
    filename_case: 0
    # 显示草稿
    render_drafts: false
    # 启动 Asset 文件夹
    post_asset_folder: false
    # 把链接改为与根目录的相对位址
    relative_link: false
    # 显示未来的文章
    future: true
    # 代码块的设置
    highlight:
      enable: true
      line_number: true
      auto_detect: false
      tab_replace:
    # Home page setting
    # path: Root path for your blogs index page. (default = '')
    # per_page: Posts displayed per page. (0 = disable pagination)
    # order_by: Posts order. (Order by date descending by default)
    index_generator:
      path: ''
      per_page: 10
      order_by: -date
    # Category & Tag
    # 默认分类
    default_category: uncategorized
    # 分类别名
    category_map:
    # 标签别名
    tag_map:
    # Date / Time format
    ## Hexo uses Moment.js to parse and display date
    ## You can customize the date format as defined in
    ## http://momentjs.com/docs/#/displaying/format/
    # 日期格式
    date_format: YYYY-MM-DD
    # 时间格式
    time_format: HH:mm:ss
    # Pagination
    ## Set per_page to 0 to disable pagination
    # 每页显示的文章量 (0 = 关闭分页功能)
    per_page: 10
    # 分页目录
    pagination_dir: page
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    # 主题
    theme: landscape
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    # 部署设置
    deploy:
      type:  #部署类型
      repo:  #部署的仓库地址
    
    
    部署设置
      deploy: 
        type: git 
        repo: git@github.com:username/username.github.io.git  //(改成自己的用户名和用户名加域名) 
        branch: master
    
    发布到github

    生成静态文件

        hexo g
    

    部署

        hexo d
    

    启动本地访问

       hexo s
    

    访问地址http://localhost:4000

    常用hexo命令

    常见命令

    hexo new "postName" #新建文章
    hexo new page "pageName" #新建页面
    hexo generate #生成静态页面至public目录
    hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
    hexo deploy #部署到GitHub
    hexo help  # 查看帮助
    hexo version  #查看Hexo的版本
    

    缩写:

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

    组合命令:

    hexo s -g #生成并本地预览
    hexo d -g #生成并上传
    

    相关文章

      网友评论

        本文标题:Hexo+GitHub搭建博客

        本文链接:https://www.haomeiwen.com/subject/eqedkctx.html