• Hexo+github pages搭建个人博客(这一篇博客就够了)


    1. 准备工作

    本文所使用环境:

    • Windows10
    • git@2.21.0
    • nodejs@10.15.3
    • hexo-cli@1.1.0

    下面分别进行各个部分的安装配置。

    1.1 安装git

    在Windows上使用Git,可以从Git官网直接下载安装程序,(网速慢的同学请移步国内镜像),然后按默认选项安装即可。

    安装完成后,在开始菜单里找到“Git”->“Git Bash”,蹦出一个类似命令行窗口的东西,就说明Git安装成功!


    安装完成后,还需要最后一步设置,在命令行输入($表示在gitbash中输入):

    $ git config --global user.name "你的名字"
    $ git config --global user.email "email@example.com"
    

    因为Git是分布式版本控制系统,所以,每个机器都必须自报家门:你的名字和Email地址。你也许会担心,如果有人故意冒充别人怎么办?这个不必担心,首先我们相信大家都是善良无知的群众,其次,真的有冒充的也是有办法可查的。

    注意git config命令的--global参数,用了这个参数,表示你这台机器上所有的Git仓库都会使用这个配置,当然也可以对某个仓库指定不同的用户名和Email地址。

    关于git的具体操作可以参照 廖雪峰Git教程

    1.2 安装nodejs

    Node.js安装包以及源码下载地址为:https://nodejs.org/en/download/。
    下载LTS版本一步步点击确认即可。

    配置环境变量之后,打开命令行cmd,显示如下画面即安装成功:

    1.3 安装NPM

    NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,适用于如下情况:

    • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
    • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
    • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

    显示如下画面则配置成功。

    由于众所周知的原因,npm指令官方镜像是非常慢的,这里推荐使用淘宝NPM镜像

    淘宝 NPM 镜像是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

    你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

    $ npm install -g cnpm --registry=https://registry.npm.taobao.org
    

    这样就可以使用 cnpm 命令来安装模块了:

    $ cnpm install [name]
    

    更多关于nodejs可前往 菜鸟教程

    1.4 安装Hexo

    Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

    使用npm或者cnpm安装:

    $ npm install -g hexo-cli
    

    显示如下表示安装成功:

    执行以下指令安装 hexo 部署到 git page 的 deployer:

    $ npm install hexo-deployer-git --save  
    

    安装 Hexo 完成后,在磁盘找个位置新建一个文件夹,这里是你的博客所有文件存放的文件夹,之后右键打开gitbash执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

    $ hexo init <folder>
    $ cd <folder>
    $ npm install
    

    folder为你的博客文件夹的名称,我这里是myblog,执行过程如下:
    显示如图则表示hexo安装成功
    ls 查看文件夹内容
    新建完成后,指定文件夹的目录如下:

    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    | ├── _drafts
    | └── _posts
    └── themes

    执行以下命令,执行完即可登录 http://localhost:4000/ 查看效果:

    $ hexo generate 或者 hexo g  
    $ hexo server 或者 hexo s
    

    显示以下信息说明操作成功:

    INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
    
    hexo博客配置成功

    2. 部署hexo到github pages

    2.1 关于github pages

    2.2 创建仓库

    熟手可以直接跳过了。

    打开github右上角创建新仓库:
    新建仓库
    将仓库的名字设置成自己github帐号的名字,必须一模一样,每个帐号只有一个github pages:
    获得githubpages

    2.2 绑定域名(可跳过)

    现在我们可以通过访问 yourname.github.io 这个网址来进入到我们的githubpages,这就是我们的网站地址了,当然你可以直接使用这个网址,不过这个网址怎么说也太难记太没有个性,接下来我们将使用DNS把这个网址解析到一个我们想要的个性域名上。

    首先我们要有一个域名

    可以去 阿里云、腾讯云申请一个域名,我申请的是.top的域名,价格比较便宜。
    顺便打广告:点击进入我的博客
    根据自己的喜好和富有程度购买一个域名,之后我们怎么才能通过这个域名访问到我们的网站呢?

    将域名和github绑定

    进入阿里云解析平台,来到阿里云的管理控制台,选择自己购买的域名,点击解析

    进入后设置两个:A和CNAME,按照图中设置即可,是为了我们访问带www和不带www时都能解析到我们的githubpages网址。CNAME的记录值填自己刚刚创建的仓库的地址,A的记录值为仓库地址的IP地址。(仓库IP可以通过cmd命令行ping yourname.github.io获得)
    进入后设置两个:A和CNAME
    注意:可能需要实名认证,要确保域名解析状态正常和认证成功,否则无法正常访问域名(当时我就是这里跳进了大坑,等了半天都没有成功解析)。

    然后返回github,打开刚刚创建的仓库,进入settings
    进入settings
    在如下位置输入购买的域名

    等待几分钟,在浏览器输入自己的域名就可以成功访问到github pages啦~

    到此个性域名绑定完成

    2.3 配置SSH key

    到目前为止,我们有了:

    • hexo搭建的本地博客
    • github pages提供的网站服务器

    我们怎么把博客和github关联起来呢?这就需要用到ssh和git了。

    为什么要配置SSH?

    • 因为本地Git仓库和GitHub仓库之间的传输是通过SSH加密的

    只有配置好 SSH 密钥后,我们才可以通过git操作实现本地代码库与 Github 代码库同步。

    第1步:任何地方 Git Bash 输入以下命令(引号里填的是你的邮箱地址):

    $ ssh-keygen -t rsa -C "your email@example.com" 
    

    之后会出现:

     Generating public/private rsa key pair.  
     Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):  
     //到这里可以直接回车将密钥按默认文件进行存储
    

    然后会出现:

     Enter passphrase (empty for no passphrase):  
     //这里是要你输入密码,其实不需要输什么密码,直接回车就行 
     Enter same passphrase again:  
    

    接下来屏幕会显示:

     Your identification has been saved in /c/Users/you/.ssh/id_rsa.  
     Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.  
     The key fingerprint is:  
     这里是各种字母数字组成的字符串,结尾是你的邮箱  
     The key's randomart image is:  
     这里也是各种字母数字符号组成的字符串  
    

    你需要把邮件地址换成你自己的邮件地址,然后一路回车,使用默认值即可,由于这个Key也不是用于军事目的,所以也无需设置密码。

    如果一切顺利的话,可以在用户主目录里找到.ssh目录,里面有id_rsaid_rsa.pub两个文件,这两个就是SSH Key的秘钥对,id_rsa是私钥,不能泄露出去,id_rsa.pub是公钥,可以放心地告诉任何人。

    第2步:登陆GitHub,打开“Account settings”,“SSH Keys”页面:

    然后,点“Add SSH Key”,填上任意Title,在Key文本框里粘贴id_rsa.pub文件的内容:

    点“Add Key”,你就应该看到已经添加的Key。

    为什么GitHub需要SSH Key呢?

    • 因为GitHub需要识别出你推送的提交确实是你推送的,而不是别人冒充的,而Git支持SSH协议,所以,GitHub只要知道了你的公钥,就可以确认只有你自己才能推送。
    • 当然,GitHub允许你添加多个Key。假定你有若干电脑,你一会儿在公司提交,一会儿在家里提交,只要把每台电脑的Key都添加到GitHub,就可以在每台电脑上往GitHub推送了。

    测试是否成功

    git bash中输入指令:

     $ ssh -T git@github.com
    

    说明配置成功。

    2.4 上传到github

    配置_config.yml

    如果你一切都配置好了,发布上传很容易,一句hexo g && hexo d就搞定,当然关键还是你要把所有东西配置好。

    首先,ssh key肯定要配置好。

    其次,配置_config.yml中有关deploy的部分(这个_config.yml是hexo的,之后theme中也有个_config.yml):

    正确写法:

    deploy:
      type: git
      repository: git@github.com:ZhuangXuward/ZhuangXuward.github.io.git
      branch: master
    

    如果出现错误,可能是由于deploy相关的包没有安装成功,git bash中输入:

    $ npm install hexo-deployer-git --save
    

    CNMAE文件

    在本地你的博客文件夹中,找到source目录,在source目录下新建一个名为CNAME的无后缀文件(可以记事本打开,另存为所有文件),内容是你的域名(不含www),如下图:
    source目录下新建CNAME
    CNAME内容
    之后输入指令:

    $ hexo clean
    $ hexo generate
    $ hexo deploy
    

    打开你的域名,就可以发现你的githubpages显示出来啦~

    3. 发表新文章

    3.1 markdown使用

    由于hexo编写博客使用的是markdown语法,保存的文件也是md文件,所以我们需要学习md语法。
    markdown语法有很多,这里就不提供啦,自行百度即可。

    3.2 常用命令

    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 #生成并上传
    

    3.3 写博客

    找到我们的博客的文件夹,也就是hexo根目录,git bash

    hexo new 'Hexo+giuhub pages搭建个人博客'
    

    之后就会在source的_post下生成md文件:
    生成md文件
    之后打开这个md文件(可以使用sublime打开):
    打开这个md文件
    在其中编写博客:
    编写博客
    之后回到git bash,输入指令:

    $ hexo g
    

    等待一段时间,我们的静态页面就生成了:
    hexo g
    再输入:

    $ hexo d
    

    把本地的静态页面部署到我们的github远程仓库,等待完成后看到deploy done: git,就表示部署成功了。再打开我们的网站,就可以看到新创建的博客啦:
    deploy done: git
    新文章
    平时也可以通过本地静态页面来进行修改,因为没有deploy到服务器,这样就相当于打草稿:

    $ hexo d
    $ hexo s
    

    之后打开http://localhost:4000/就可以看到本地静态页面了。

    4. 更换主题

    这时你就会问,能不能换一个主题呢?这个主题不喜欢啊!

    当然可以!

    4.1 获得&&下载主题

    首先官方就有很多主题可以下载:Hexo官方

    找到一个喜欢的主题点进去,主题介绍页面都会有详细说明,按照说明一步步走就没什么问题了。比如:
    安装

    $ cd your_blog_dir
    $ git clone https://github.com/kinggozhang/hexo-theme-ace.git themes/ace
    

    4.2 配置主题_config.yml

    这时博客文件夹的theme中应该会出现一个新的文件夹,这就是你刚刚下载clone的新主题。

    找到博客的_config.yml(不是theme中的),修改theme为当前主题的名字。

    之后进入theme中选中你的主题,进入主题中的_config.yml,在里面进行更多细节的设置。

    一般情况下都会有很详细的注释,按照自己的需求修改即可。

    5. 更多细节&参考

    搭建过程

    美化细节

    初学前端,记录学习的内容和进度~
  • 相关阅读:
    数据库连接字符串
    搭建消息队列
    Linux---江湖
    Bundle压缩JS和CSS
    DDD分层架构之仓储
    UI控件库
    图解Http协议 url长度限制
    JAVA jdbc(数据库连接池)学习笔记(转)
    领域驱动设计(DDD)部分核心概念的个人理解(转)
    怎样的中奖算法能让人信服(转)
  • 原文地址:https://www.cnblogs.com/xiuhua/p/13398788.html
Copyright © 2020-2023  润新知