[教程]Hexo + Github 搭建自己的专属博客

2023-11-19

[教程]Hexo + Github 搭建自己的专属博客

1. 安装Git和NodeJS

  • 在Windows上使用Git,可以从Git官网直接https://git-scm.com/downloads,然后按默认选项安装即可。安装完成后,在开始菜单里找到“Git”->“Git Bash”,蹦出一个类似命令行窗口的东西,就说明Git安装成功!

  • 在Git中绑定Github账号,打开“Git Bash”,在命令框中依次输入两行命令:

    git config --global user.name “Your Name”        
    git config --global user.email email@example.com
    # 其中Your Name和email@example.com替换成上面注册时的账户名和邮箱
    
  • 由于 Hexo 是基于 Node.js 驱动的一款博客框架,所以安装NodeJS https://nodejs.org/en/download/ 并配置环境变量。

  • 安装之后可以输入以下命令查看是否安装成功:

    git version
    node -v
    npm -v
    

2. 安装Hexo

  • 以上环境准备好了就可使用 npm 开始安装 Hexo 了,在命令行输入执行如下命令:

    npm install -g hexo-cli
    
  • 安装 Hexo 完成后,在指定文件夹下打开“Git Bash”,再执行下列命令,Hexo 将会在指定文件夹中新建所须要的文件:

    hexo init myBlog
    cd myBlog
    npm install
    
  • 若是上面的命令都没报错的话,就恭喜了,运行hexo s 命令,其中 s 是 server 的缩写,在浏览器中输入 http://localhost:4000 回车就能够预览效果了。
    在这里插入图片描述

3. 加载主题

  • 大家可以去官网上找自己喜欢的主题下载https://hexo.io/themes/ ,自己采用的主题是https://github.com/Siricee/hexo-theme-Chic ,这款有明暗两种颜色。
    在这里插入图片描述

    在这里插入图片描述

  • 基本大家用的最多的是NEXT主题:https://github.com/next-theme/hexo-theme-next
    在这里插入图片描述

  • 随后将下载的主题文件夹放在myblog/themes中,在_config.yml文件中修改theme 为hexo-theme-Chic(注意和主题文件名一致)
    在这里插入图片描述

  • 修改好之后在“Git Bash”中执行hexo g命令,然后再hexo s,在浏览器中输入 http://localhost:4000 回车就能够预览修改主题后的效果了。
    在这里插入图片描述

4. 修改主题配置

  • 修改在主题文件夹下的_config.yml文件,完成自己个人的配置。

    # Header   主页面标题
    navname: Bentham's Blog
    
    # navigatior items  四个文件归类
    nav:
      Posts: /archives
      Categories: /category
      Tags: /tag
      About: /about
    
    # favicon    图标
    favicon: /favicon.ico
    
    # Profile    中间显示名字
    nickname: Jeremy Bentham
    
    ### this variable is MarkDown form.
    # 个人描述,可以修改成自己要显示的句子
    description: Lorem ipsum dolor sit amet, **consectetur adipiscing elit.** <br>Fusce eget urna vitae velit *eleifend interdum at ac* nisi.
    # 个人头像图片
    avatar: /image/avatar.jpeg
    
    # main menu navigation
    ## links key words should not be changed.
    ## Complete url after key words.
    ## Unused key can be commented out.
    # 下方超链接
    links:
      Blog: /archives
      # Category:
      # Tags: 
      # Link:
      # Resume:
      # Publish:
      # Trophy:
      # Gallery:
      # RSS:
      # AliPay:
      ZhiHu: https://www.zhihu.com/people/sirice
      # LinkedIn:
      # FaceBook:
      # Twitter:
      # Skype:
      # CodeSandBox:
      # CodePen:
      # Sketch:
      # Gitlab:
      # Dribbble:
      Instagram:
      Reddit:
      # YouTube:
      # QQ:
      # Weibo:
      # WeChat:
      Github: https://github.com/Siricee
    
    # how links show: you have 2 choice--text or icon. 图标 or 文字
    links_text_enable: false
    links_icon_enable: true
    
    # Post page
    ## Post_meta
    post_meta_enable: true
    
    post_author_enable: true
    post_date_enable: true
    post_category_enable: true
    ## Post copyright
    post_copyright_enable: true
    
    post_copyright_author_enable: true
    post_copyright_permalink_enable: true
    post_copyright_license_enable: true
    post_copyright_license_text: Copyright (c) 2019 <a href="http://creativecommons.org/licenses/by-nc/4.0/">CC-BY-NC-4.0</a> LICENSE
    post_copyright_slogan_enable: true
    post_copyright_slogan_text: Do you believe in <strong>DESTINY</strong>?
    ## toc
    post_toc_enable: true
    
    # Page
    page_title_enable: true
    
    # 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: MMMM D, YYYY
    time_format: H:mm:ss
    
    # stylesheets loaded in the <head>
    stylesheets:
      - /css/style.css
    
    # scripts loaded in the end of the body
    scripts:
      - /js/script.js
      - /js/tocbot.min.js
        # tscanlin/tocbot: Build a table of contents from headings in an HTML document.
        # https://github.com/tscanlin/tocbot
    
    
    # plugin functions
    ## Mathjax: Math Formula Support
    ## https://www.mathjax.org
    # 数学公式
    mathjax:
      enable: true
      import: demand # global or demand
      ## global: all pages will load mathjax,this will degrade performance and some grammers may be parsed wrong.
      ## demand: Recommend option,if your post need fomula, you can declare 'mathjax: true' in Front-matter
    

5. 将博客部署在GitHub上

  • 点击 Start project 或者下面的 new repository 建立一个新的仓库,注意Github 仅能使用一个同名仓库的代码托管一个静态站点,这里注意仓库名一定要是:用户名.github.io

  • 配置 SSH key ,要使用 git 工具首先要配置一下SSH key,为部署本地博客到 Github 作准备。

    git config --global user.name "用户名"
    git config --global user.email "邮箱地址"
    ssh-keygen -t rsa -C '上面的邮箱'
    

    按照提示完成三次回车,便可生成 ssh key,采用以下指令也可以查看自己的ssh:

    cat ~/.ssh/id_rsa.pub
    

    首次使用还须要确认并添加主机到本机SSH可信列表。若返回 Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access. 内容,则证实添加成功。

    ssh -T git@github.com 
    
  • 登陆 Github 上添加刚刚生成的SSH key,按如下步骤添加,右上角点击头像-> settings -> SSH and GPG keys,建立一个新的 SSH key, 标题随便,key 就填刚才生成那个,确认建立,这样在你的 SSH keys 列表里就会看到你刚刚添加的密钥。
    在这里插入图片描述
    在这里插入图片描述

  • 此时,本地和Github的工做作得差不了,是时候把它们两个链接起来了。你也能够查看官网的部署教程。先不着急,部署以前还须要修改配置和安装部署插件。第一:打开项目根目录下的 _config.yml 配置文件配置参数。拉到文件末尾,填上以下配置。
    在这里插入图片描述

  • 第二要安装一个部署插件 hexo-deployer-git,打开“Git Bach”,输如以下指令:

    npm install hexo-deployer-git --save
    
  • 最后执行如下两条命令就能够部署上传啦,如下 g 是 generate 缩写,d 是 deploy 缩写

    hexo g    # 先生成
    hexo d	  # 部署到Github上
    
  • 这时用浏览器输入用户名.github.io就可以访问刚才的网站啦。

6. 写文章并上传

  • 博客搭好了,就开始写文章了,这里简单介绍一下,详细的文档能够看 hexo 官网。新建文章,输入如下命令便可

    hexo new '文章标题'
    
  • 执行完成后能够在 /source/_posts 下看到一个“文章标题.md”的文章文件啦。.md 就是 Markdown 格式的文件,具体用法能够在网上找一下,语法仍是比较简单的。

    ---
    title: blogTest
    date: 2021-08-20 18:07:21
    tags: Test
    categories: blog1
    ---
    ### 1. This is a blog Test
    * First
    * Second
    ---
    ### 2. Show Text
    * **这是加粗**
    > *这是斜体*
    
  • 之后依次输入以下命令:

    hexo g    # 生成文件
    hexo s    # 本地服务器查看网站
    hexo d    # 部署到Github 上
    

7. 配置一些特效

  • 雪花特效:themes\hexo-theme-Chic\layout\index.ejs中添加如下代码:

         <!-- 雪花特效 -->
    <script type="text/javascript" src="https://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
    <script type="text/javascript" src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    
    <script type="text/javascript" src="/js/snow.js"></script>
    
  • 蜘蛛网特效:themes\hexo-theme-Chic\layout\layout.ejs中添加如下代码:

    <script>
    !
    function() {
        function n(n, e, t) {
            return n.getAttribute(e) || t
        }
        function e(n) {
            return document.getElementsByTagName(n)
        }
        function t() {
            var t = e("script"),
            o = t.length,
            i = t[o - 1];
            return {
                l: o,
                z: n(i, "zIndex", -1),     //置于主页面背后
                o: n(i, "opacity", .5),     //线条透明度
                c: n(i, "color", "0,0,0"),  //线条颜色
                n: n(i, "count", 100)    //线条数量
            }
        }
        function o() {
            a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
            c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
        }
        function i() {
            r.clearRect(0, 0, a, c);
            var n, e, t, o, m, l;
            s.forEach(function(i, x) {
                for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[e],
                null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y, l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
            }),
            x(i)
        }
        var a, c, u, m = document.createElement("canvas"),
        d = t(),
        l = "c_n" + d.l,
        r = m.getContext("2d"),
        x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(n) {
            window.setTimeout(n, 1e3 / 45)
        },
        w = Math.random,
        y = {
            x: null,
            y: null,
            max: 2e4
        };
        m.id = l,
        m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o,
        e("body")[0].appendChild(m),
        o(),
        window.onresize = o,
        window.onmousemove = function(n) {
            n = n || window.event,
            y.x = n.clientX,
            y.y = n.clientY
        },
        window.onmouseout = function() {
            y.x = null,
            y.y = null
        };
        for (var s = [], f = 0; d.n > f; f++) {
            var h = w() * a,
            g = w() * c,
            v = 2 * w() - 1,
            p = 2 * w() - 1;
            s.push({
                x: h,
                y: g,
                xa: v,
                ya: p,
                max: 6e3
            })
        }
        u = s.concat([y]),
        setTimeout(function() {
            i()
        },
        100)
    } ();
    </script>
    
  • 评论区采用的时Valine https://valine.js.org/ 和LeanCloud

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

[教程]Hexo + Github 搭建自己的专属博客 的相关文章

随机推荐

  • QT学习之四:Linux 下 Qt Creator 的一个Qt 项目全过程

    Linux 下 Qt Creator 的一个Qt项目全过程 1 启动桌面上的 Qt Creator 新建工程 HelloWorld 点击 File gt New File orProject 如下图所示 2 新建类 Hello 右键单击项目
  • Three.js中光线投射Raycaster的简单使用案例 与模型的交互,当鼠标移动到模型时出现信息框

    无用的话 本人是编程小白 想创建一个氛围好的技术交流群 喜欢技术分享 技术指导 技术交流的朋友可以进Q群 732515998 大家一起快乐编程 想发公告的就不要进来了 目录 说明 创建两个模型 基础代码 基础代码效果图如下 重点 创建光线投
  • Android webview加载网页

    webview尝试 一 在线加载网页 例百度 webview布局很简单xml如下
  • 快速椭圆检测代码调试记录

    代码环境 Windows11 vs2019 opencv3 3 1 Debugx64 一 代码注释 1 realpath PATH MAX basename 这几句是为了在Ubuntu中运行时 寻找路径用的 Ubuntu需要比较严格的路径
  • 人工智能AI工具汇总(AIGC ChatGPT时代个体崛起)

    Name Category Website Description 描述 AIGC时代 超级个体的崛起 小报童 https xiaobot net p SuperIndividual 介绍AIGC ChatGPT 使用技巧与搞钱方式 Mas
  • React学习(编程式导航)

    学习目标 提示 这里可以添加学习目标 1 编程式导航 编程式导航 提供了通过脚本代码实现页面跳转的功能 主要api函数包含在路由对象参数 history中 this props history push login 跳转到登录路径 保留访问
  • java 调用controller_java调用controller方法

    我们有一个路由StudentController 里面有一个方法count 如果要在另外一个GradeController中调用count 方法有2种方式 因为StudentController是一个class 不是接口 接口一般都是 Au
  • 用 plt 画折线图(将训练过程中的每个epoch 的准确率和损失用图的形式展示出来)

    代码 import matplotlib pyplot as plt epochs range 0 4 acc 2 1 2 3 1 4 5 loss 1 1 1 4 0 8 0 6 plt plot epochs acc color r l
  • python sklearn 梯度下降法_【机器学习】梯度下降法(Gradient descent)

    说明 以下内容为学习刘建平老师的博客所做的笔记 梯度下降 Gradient Descent 小结 www cnblogs com 因为个人比较喜欢知乎文章的编辑方式 就在这里边记笔记边学习 喜欢这个博客的朋友 可以去刘建平老师的博客foll
  • 使用google的免费GPU

    1 打开网页 输入Google colab 2 点击 修改 gt 笔记本设置 3 点击使用GPU 常用命令 print torch version print torch cuda is available
  • 1.centos7安装docker

    本文目录 1 docker 安装 1 安装步骤 2 安装是否成功校验 3 docker加速配置 4 hello world来袭 验证安装是否ok 2 卸载docker 3 卸载较旧版本docker 使用docker必备的三个官方网站 doc
  • 无线路由、AP、网桥之区别详解篇

    通过无线上网冲浪 现在已经不是新鲜的事情 随着近一两年无线 网络的飞速发展 从企业到家庭都开始在不同的领域体验着 自由上网 的乐趣 笔者接触无线网络也有一段时间了 经常在一些无线论坛逛游 无论是在现实生活还是在论坛中 总会有朋友不断的问这样
  • HyperLedger Fabric 实践错误收集

    HyperLedger Fabric 实践错误收集 在ubuntu中通过docker compose启动容器的时候报错 ERROR for cli Cannot create container for service cli Confli
  • 光模块之SR、LRM、LR、ER 、ZR对比介绍

    SFP介绍 现有的ARUBA 原来的HP 万兆模块有多种 除了MMF表示多模SMF表示单模 SR LRM LR ER等都代表什么意思 本文做个简单对比介绍 将帮助您根据您的实际需要选择合适的10G SFP 模块 Aruba 10G SFP
  • 英语软件的日志怎么写

    今天一个外企个小伙伴跑来跟我说 老板说他的程序里的英语写的太烂 让我教他怎么写日志 虽然我自己用英语写log 也还马马虎虎 但是让我系统的介绍 我也犯了难 好在 我做过自然语言处理 NLP 也做过针对计算机系统的日志的挖掘 所以我知道有个东
  • Lua脚本在redis中的使用学习

    Lua脚本在redis中的使用学习 0 前言 不同于之前遇到的redisTemplate的简单set get方法 这里是使用Redis脚本执行redis操作 DefaultRedisScript
  • Linux宝塔面板 网址忘记了,或者账号密码错误怎么办?

    在linux中安装宝塔面板后会生成网址 账号和密码 如果网址忘记了那将进不去宝塔面板 bt 命令 输入bt后 在输入14就可以查看宝塔面板详细信息 root localhost bt 宝塔面板命令行 1 重启面板服务 8 改面板端口 2 停
  • struts2-输入校验、xml校验的使用

    1 输入校验 直接在Action类里添加相应的方法 这里定义了一个中间变量 前面我直接返回SUCCESS ERROR会报错 具体我还要研究一下 struts xml login jsp 2 xml校验 在XXAction的同级目录下 建立X
  • Qt Desginer布局方法

    关于Qt Desginer中的布局方法 网上教程少之又少 个人经过反复的实践和摸索 觉得可以用一句话来概括 先不断地进行小布局 然后对整体进行大布局 先不断地进行小布局的目的就是将同为一组的控件按某个格式排列使界面干净有序 同时方便以后对整
  • [教程]Hexo + Github 搭建自己的专属博客

    教程 Hexo Github 搭建自己的专属博客 文章目录 教程 Hexo Github 搭建自己的专属博客 1 安装Git和NodeJS 2 安装Hexo 3 加载主题 4 修改主题配置 5 将博客部署在GitHub上 6 写文章并上传