搭建个人Web服务器_NGHG

项目名称:搭建个人Web服务器_NGHG

1 搭建模式:

  • NGHG,即Node.js + Git + Hexo + Github

2 搭建步骤

  • 【第一步】安装Node.js

    下载网址:https://nodejs.org/en/

搭建个人Web服务器_NGHG_第1张图片

结果验证:

# 查看node版本
node -v
# 查看npm版本
npm -v
  • 【第二步】安装Git

    下载网址:https://git-scm.com/downloads

搭建个人Web服务器_NGHG_第2张图片

结果验证:

搭建个人Web服务器_NGHG_第3张图片

  • 【第三步】安装Hexo

    • 新建文件夹MyBlog (名字可自行设置,本文件夹主要存放系统文件及后续要上传的资源)

    • 打开文件夹,右键Git Bash Here

搭建个人Web服务器_NGHG_第4张图片

  • 依次执行下面指令

    npm install -g hexo
    
    # 2.安装所需附加组件
    npm install
    
    # 3.初始化hexo框架
    hexo init
    
    # 4.编译生成静态页面
    hexo g
    
    # 5.启动本地服务
    hexo s
    
    此时就可以通过http://localhost:4000 访问web页面了
    
  • 界面
    搭建个人Web服务器_NGHG_第5张图片
    搭建个人Web服务器_NGHG_第6张图片搭建个人Web服务器_NGHG_第7张图片
    搭建个人Web服务器_NGHG_第8张图片
    搭建个人Web服务器_NGHG_第9张图片
    搭建个人Web服务器_NGHG_第10张图片

  • 【第四步】关联GitHub

    • 1.1 GitHub创建仓库

搭建个人Web服务器_NGHG_第11张图片

  • 打开Git bash,输入如下指令,连接GitHub。

    # 用户名连接 修改为你自己的GitHub用户名
    git config --global user.name "yourname"
    
    # 邮箱连接 修改为你自己的GitHub绑定邮箱
    git config --global user.email "youremail"
    

在这里插入图片描述

>  git config --list      # 查看绑定详情

搭建个人Web服务器_NGHG_第12张图片

  • 配置SSHkey添加到GitHub

    ssh-keygen -t rsa -C "你的邮箱"
    # 回车即可
    

搭建个人Web服务器_NGHG_第13张图片

  • 回到GitHub中,点击settings—>SSH and GPG keys—>New SSH key。

搭建个人Web服务器_NGHG_第14张图片

搭建个人Web服务器_NGHG_第15张图片

  • 回到git bash输入如下命令,得到我们的key。

    cat ~/.ssh/id_rsa.pub
    

搭建个人Web服务器_NGHG_第16张图片

  • 将我们复制的key放入中间部分,标题随意,完成后点击Add SSH key。

搭建个人Web服务器_NGHG_第17张图片

搭建个人Web服务器_NGHG_第18张图片

  • 上传到Github所建仓库,修改文件属性。

      type: git
      repository: [email protected]:LeeZhao415/LeeZhao415.github.io.git
      branch: master
    

搭建个人Web服务器_NGHG_第19张图片

  • 安装hexo-deployer-git,便于展示内容。

    npm install hexo-deployer-git --save
    

搭建个人Web服务器_NGHG_第20张图片

  • 执行下列指令

    hexo clean  # 清理数据库
    
    hexo g  # 生成内容
    
    hexo s  # 打开服务器
    
    hexo d  # 展示内容
    
    • 结果验证

搭建个人Web服务器_NGHG_第21张图片

  • 测试访问

    在浏览器中输入 http://leezhao415.github.io 访问

搭建个人Web服务器_NGHG_第22张图片

3 创建博客

hexo n "博客的文件名"

在这里插入图片描述

搭建个人Web服务器_NGHG_第23张图片

执行下列代码后,打开 http://leezhao415.github.io即可

hexo clean  # 清理数据库

hexo g  # 生成内容

hexo s  # 打开服务器

hexo d  # 展示内容

搭建个人Web服务器_NGHG_第24张图片

4 常见问题

打开链接是提示如下:

搭建个人Web服务器_NGHG_第25张图片

原因
Hexo无法解析模板文件

解决方案
使用以下的命令

npm install hexo-renderer-ejs --save
npm install hexo-renderer-stylus --save
npm install hexo-renderer-marked --save

.(img-4824CXd5-1619097747694)]

原因
Hexo无法解析模板文件

解决方案
使用以下的命令

npm install hexo-renderer-ejs --save
npm install hexo-renderer-stylus --save
npm install hexo-renderer-marked --save

你可能感兴趣的:(网络通信,网络通信,hexo,web服务器)