用hexo+github搭建博客(一)

·  阅读 988

[mac]搭建博客 [完结于2018-05-29 15:38:51]

一直想搭个人博客,却无从下手??


链接自取

个人比较喜欢先甩参考链接,可以选择直接去看参考链接。

第二个链接也是参考第一个写的,第一个链接加载超级慢,可以选择看第二个。

一、准备工作

  1. 默认已有GitHub账号
  2. 默认已安装Git
  3. 默认已安装 Node.js
  4. Install Hexo
    • 全局下载hexo

            $ npm install -g hexo-cli
      复制代码
    • 查看是否成功

            $ hexo
      复制代码

    进入Hexo官网文档了解更多


二、初始化博客

    $ hexo init HotYan_Bolg //创建一个放在博客项目的文件
    $ cd HotYan_Bolg       //进入该文件
    $ npm install       //安装依赖包
复制代码

 进入HotYan_Bolg,已自动生成以下文件

    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    └── themes
复制代码

三、本地搭建

  1. 修改_config.yml文件

    根据个人情况修改以下部分:

     /*修改前*/
     # Site
       title: # The title of your website
       subtitle: # The subtitle of your website
       description: # The description of your website
       author: # Your name
       language: # The language of your website
       timezone:
    
     /*修改后*/
     # Site
       title: hotYan's Blog 
       subtitle: 
       description: 
       keywords:
       author: hotYan
       language: zh-CN
       timezone: Asia/Shanghai
    复制代码

    注意:每一项的填写,其 :后面都要保留一个空格,下同。


  1. 本地运行
     $ cd  HotYan_Blog //进入博客文件夹目录
    
     $ hexo generate // 生成文件
     $ hexo server   //本地部署
     
     /*简写如下*/
     $ hexo g
     $ hexo s
    复制代码

    可在浏览器输入地址 http://localhost:4000进行查看


四、配置远程环境,线上运行

  1. github新建一个库
     库名格式为: username.github.io //非常重要!!!
    复制代码

    你可能想了解一下GitHub Pages


  1. GitHub添加SSH密钥

  1. 配置_config.yml文件
    • 配置统一资源定位符(个人域名)

        /*配置前*/
        # URL
        # If your site is put in a subdirectory, .....
        url: http://yoursite.com/child
                
        /*配置后*/  
        # URL
        # If your site is put in a subdirectory,......
        url: http://github.com
      复制代码
    • 配置部署

        # Deployment
        # Docs: https://hexo.io/docs/deployment.html
          deploy:
              type: git 
              repo: https://github.com/hotYan/hotYan.github.io.git  //repo项是之前Github上创建好的仓库地址
              branch: master
      复制代码

  1. 线上运行
     $ cd  HotYan_Blog //进入博客文件夹目录
     
     $ hexo generate // 生成文件
     $ hexo deploy   // 线上部署
     
     /*简写如下*/
     $ hexo g
     $ hexo d
    复制代码

    可在浏览器输入博客地址 https://hotyan.github.io/ 进行查看


五、修改主题

  1. 下载Next主题
  2. 下载后,将压缩包解压缩,复制其中名称为next的文件夹到你博客文件的themes下
  3. 修改博客文件根目录下的_config.yml,将主题改为next
     # Extensions
     # Plugins: https://hexo.io/plugins/
     # Themes: https://hexo.io/themes/
     # theme: landscape
       theme: next   
    复制代码

六、创建新文章

  1. 创建
     $ cd  HotYan_Blog   //进入博客文件夹目录
     $ hexo new "用hexo搭建github博客一"  // 新建一篇文章
    复制代码

    可在博客文件夹下的source/_post查看你新建的markdown文件


  1. 编写内容

    如果不清楚如何编写markdown文件,你可能需要先了解一下。


七、更新Hexo部署

    $ cd  HotYan_Blog //进入博客文件夹目录

    $ hexo clean    // 清理缓存
    $ hexo generate // 生成文件
    $ hexo deploy   // 线上部署
    
    /*简写如下*/
    $ hexo clean
    $ hexo g
    $ hexo d复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改