zoukankan      html  css  js  c++  java

  • Hexo+Git一个小时快速搭建个人博客

    myblog_v1.1

    搭建本地环境：Hexo框架

    Hexo为何物

    Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用Markdown解析文章，并瞬间利用靓丽的主题生成静态网页。其中，Markdown是一个用于将普通文本转换为HTML的工具，它以易于阅读和编写的纯文本格式进行编写，然后将其转换为的HTML（或XHTML）。

    Hexo安装

    本文是基于Windows7系统安装，如果是其他系统可参见Hexo官方文档。

    Hexo安装的前提是电脑预安装Node.js和Git。如果你的电脑已安装Node.js和Git，直接跳到第三步开始安装Hexo；如果未安装则需要先按照前两步提示进行安装，下载安装非常快。

    1. Node.js下载安装，默认安装即可。
    2. Git下载安装，Git官网下载速度非常慢，建议在腾讯软件中心下载Git，默认安装即可。用作将本地的内容提交到GitHub仓库，后续会介绍如何操作。
    3. 利用 npm 命令安装Hexo。在任意位置右击鼠标，选择Git Bash输入以下命令即可安装。耗时稍长，安装顺利的话只需要几分钟，如果在安装过程中遇到问题，可重新安装。其中，npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。
      1
      $ npm install -g hexo-cli

    成功安装Node.js、Git和Hexo后，可用以下命令查看相应版本，结果如下图：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    $ node -v        
    v8.12.0

    $ npm -v         //查看npm版本
    6.4.1

    $ git --version  //查看git版本
    git version 2.19.1.windows.1

    $ hexo --version  //查看hexo版本
    hexo: 3.8.0
    hexo-cli: 1.1.0
    os: Windows_NT 6.1.7601 win32 x64
    http_parser: 2.8.0
    node: 8.12.0
    v8: 6.2.414.66
    uv: 1.19.2
    zlib: 1.2.11
    ares: 1.10.1-DEV
    modules: 57
    nghttp2: 1.32.0
    napi: 3
    openssl: 1.0.2p
    icu: 60.1
    unicode: 10.0
    cldr: 32.0
    tz: 2017c

    建站

    安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。了解目录结构及相关信息可参看Hexo官方文档，稍后配置Hexo时会涉及到。

    1
    2
    3
    $ hexo init <folder>
    $ cd <folder>
    $ npm install

    至此博客本地环境已经搭建完毕，并附上Hexo常用命令。下面进行测试一下，发布一篇名为”Test”的博文，结果展示如下图：

    1
    2
    3
    $ hexo new "Test"  //新建一篇文章，new后面跟的是标题，最好用双引号括起来，特别是标题中有空格
    $ hexo g  //生成静态文件，g是generate的简写
    $ hexo s  //启动服务器。默认情况下，访问网址为： http://localhost:4000/。

    test

    搭建GitHub环境

    1. Github注册
    2. 新建仓库（new repository）。注意Owner与repository的前半部分必须一致，比如
      new_repository
    3. 开启GitHub Pages。进入刚才新建的仓库，点击Settings并将页面拉到底，即可看见GitHub Pages，该主页托管了上述建立的仓库，主页地址如下图所示，即为刚才新建的仓库地址。
      github_page

    关联Hexo与GitHub Pages

    初次运行 Git 前的配置

    1. 初始化Git，创建一个空的Git仓库，或者重新初始化存在的仓库:

      1
      $ git init

    2. 设置你的用户名称与邮件地址：

      1
      2
      $ git config --global user.name "John Doe"  //GitHub注册用户名
      $ git config --global user.email johndoe.com  //GitHub注册邮箱

    如果使用了 –global 选项，那么该命令 大专栏  Hexo+Git一个小时快速搭建个人博客只需要运行一次，因为之后无论你在该系统上做任何事情， Git 都会使用那些信息。 当你想针对特定项目使用不同的用户名称与邮件地址时，可以在那个项目目录下运行没有 –global 选项的命令来配置。

    使用SSH连接到GitHub

    该部分参考Github帮助文档：Connecting to GitHub with SSH。

    1. 查看存在的SSH公/私钥。通常私钥保存在文件id_rsa，私钥保存在文件id_rsa.pub。

      1
      $ ls -al ~/.ssh

    2. 生成SSH公/私钥

      1
      2
      3
      4
      $ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"  //替换邮箱为注册邮箱
      $ Enter a file in which to save the  (/c/Users/you/.ssh/id_rsa): //提示输入公/私钥保存路径，直接回车即可
      $ Enter passphrase (empty for no passphrase): //输入密码，可以留空，直接回车即可
      $ Enter same passphrase again: //再次输入密码，可以留空，直接回车即可

    3. 将秘钥添加到SSH代理

      1
      2
      3
      4
      $ eval $(ssh-agent -s)  //首先确保SSH代理在运行
      Agent pid 59566  //显示进程id

      $ ssh-add ~/.ssh/id_rsa //将秘钥添加到SSH代理

    4. 将公钥添加到Github账户

      1
      $ clip < ~/.ssh/id_rsa.pub  //复制刚才生成的公钥，如果公钥保存路径不是默认路径则该命令无效

    然后点击Github页面右上角的头像，在弹出栏中点击Settings，并在新页面左边栏中点击SSH and GPG keys，在弹出页面点击New SSH key，并将复制的公钥贴过去，title会根据邮箱自动生成。

    1. 测试SSH连接
      1
      2
      $ ssh -T git@github.com //测试代码，出现下一行提示表示连接成功
      Hi username! You've successfully authenticated, but GitHub does not provide shell access.

    将网站部署到服务器

    1. 安装 hexo-deployer-git:

      1
      $ npm install hexo-deployer-git --save

    2. 配置Deployment。

      1
      2
      3
      4
      deploy:
        type: git
        repo:git@github.com:githubname/githubname.github.io.git
        branch: master

    找到根目录中_config.yml中Deployment，按照以下代码格式，将其中的githubname更换为你的Github注册用户名即可。

    1. 将博客发布到Github
      1
      2
      3
      $ hexo clean  //清除缓存文件 (db.json) 和已生成的静态文件 (public)。
      $ hexo generate  // 生成静态文件
      $ hexo deploy  // 部署网站

    这样就实现了Hexo本地环境与Github的关联，即可通过 http://githubname.github.io 访问你部署在Github上的博客了，如下图所示。
    blog

    绑定域名

    1. 购买域名。阿里云，腾讯云等都有，最便宜的9块钱
    2. 域名解析设置。需要设置的参数，如下表所示，其他参数默认即可。
    记录类型 主机记录 记录值
    CNAME @ githubname.github.io
    A www IPV4地址1
    • 记录类型选择CNAME，则记录值填写githubname.github.io（GitHub Pages 对应域名）。
    • 记录类型选择A，则记录值填写IPV4地址，通过ping上述GitHub Pages 域名获取IPV4地址，即下表的185.199.108.153，每次ping获取得到的IPV4地址可能都不相同，所以可以不采用这种方式。
    • 主机记录填写@，则直接解析主域名，前边没有www，如aliyun.com，无论你在浏览器地址栏输入的网址是否加www。
    • 主机记录填写www，则解析后的域名含有www，如www.aliyun.com。
      1
      2
      $ ping zhaoshengxu.github.io //ping操作
      正在 Ping zhaoshengxu.github.io [185.199.108.153] 具有 32 字节的数据: //返回结果第1行

    1. 在博客根目录下的source文件夹中新建名为CNAME的无后缀文件，并将购买的域名写入（不加www），如下图所示。
      CNAME

    2. 将购买的个性化域名绑定到Github Pages。将个性化域名填入Github Pages页面的Custom domain中并保存，上翻Github Pages页面即可看到，该页面已经和你的个性化域名绑定成功。

    3. 测试输入个性化域名访问你的博客首页。

    恭喜完成博客的初期搭建，起航吧！

    参考资料

    1. Hexo官方文档
    2. Github帮助文档：Connecting to GitHub with SSH
    3. HEXO+Git+Github+域名搭建个人博客
    4. hexo+github搭建个人博客(超详细教程)
  • 相关阅读:
    N皇后
    水域大小
    1221 分割平衡字符串
    1391 检查是否存在有效路径 DFS
    盛最多水的容器11 双指针
    烧饼排序
    每日日报8——软件设计④|抽象工厂模式（人与肤色）
    每日日报5——登录功能的实现(JAVA)
    每日日报4——软件设计②|简单工厂模式（女娲造人）
    vue利用transition过渡动画实现轮播图
  • 原文地址：https://www.cnblogs.com/lijianming180/p/12239676.html
Copyright © 2011-2022 走看看