【博客搭建1】基本框架搭建

提示:该文章适合纯新手,按步骤一步步搭建即可,效果可见bigdataxy.cc,快来搭建一个属于自己的个人博客吧。

【博客搭建1】超完整博客基本框架搭建,后续有主题教程

      • 安装基本软件工具
        • Node.js安装及环境配置
        • Git安装及配置
        • 检验上述工具是否安装成功
        • Hexo的安装与检验
      • 连接Hexo与Github
        • Github建立项目
        • 连接Hexo与Github
        • 修改Deployment值
      • 完成建站并新建博客
      • 绑定自己的域名
        • 购买域名
        • 域名解析
        • 设置CNAME

本博客站点利用hexo+github搭建,在此记录分享我是如何利用hexo+github一步步成功搭建静态博客,避免日后遗忘,且作为博客维护的参考指南,特此记录。同时也希望能帮助到需要的人。

安装基本软件工具

Node.js安装及环境配置

Node.js安装,首先点击如下链接进行安装包的安装,下载完成后,按照特别注明中的Node.js安装及环境配置进行操作,即可完成Node环境配置。

Git安装及配置

Node.js安装,首先点击如下链接进行安装包的安装,下载完成后,按照安装教程进行操作,即可完成Git安装。

检验上述工具是否安装成功

打开Windows+R输入cmd,进入cmd窗口,之后输入node -v,检查node.js是否安装成功,出现如下版本号即安装成功。

之后,分别输入npm -vgit --version,进行检查,出现如下结果即安装完成。

Hexo的安装与检验

安装Hexo,在自己认为合适的地方建了一个blog文件夹。然后通过命令行进入到该文件夹里面,确保路径简单且不要有中文。输入npm install hexo -g,开始安装。

安装后,输入hexo -v检测是否安装成功,出现下图即为安装成功。

在blog文件下右键打开Git Bash Here,输入如下代码:hexo init #初始化hexo博客,等待安装,若首次不成功,重复输入hexo init再次初始化。出现INFO Start Blogging with Hexo!即为安装成功。

在cmd中输入npm install,安装所需要的组件。

之后在Git Bash中输入hexo g && hexo s,生成本地服务器。进入如下网址localhost:4000:

即可查看个人本地博客:

注:如果页面一直无法跳转,那么可能端口被占用了。此时我们ctrl+c停止服务器,接着输入hexo server -p 端口号来改变端口号

连接Hexo与Github

Github建立项目

首先创建一个GitHub账号,创建完成后,进入账号主页面,点击左上角的new创建一个新的仓库。

进入编辑仓库页面后,编辑如下:

  1. 编辑仓库名字,统一格式:xxx[^github注册名] .github.io,此处xxx一定要为github注册名
  2. 点击Add a README file
  3. 点击Create a license创建新的仓库

上述操作之后,该项目已经被部署到网络上,通过xxx.github.io能够进行访问。

连接Hexo与Github

将Hexo与Github page练习起来,设置Git的user name和email。

首先在blog文件夹里面右键,点击Git Bash Here。分别输入如下代码,这里的用户名和邮箱改为自己的。

git config -global user.name "Bigdata-xy"
git config -global user.name "[email protected]"

输入cd ~/.ssh,并输入ls进行查看。

之后,再输入如下命令:

ssh-keygen -t rsa -C "邮件地址"

这里的邮件地址为申请GitHub的邮件地址。ssh密钥生成。

连续三次回车,生成密钥,最后得到两个文件:id_rsaid_rsa.pub

接着输入eval “$(ssh-agent -s)”,回车,添加密钥到ssh-agent

再输入ssh-add ~/.ssh/id_rsa,回车,添加生成的SSH key到ssh-agent

接着登录Github,点击头像下的settings,点击new ssh key新建钥匙,名字随意输入,key栏粘贴之前在id_rsa.pub中的代码。

在.ssh路径下输入cat id_rsa.pub可查看并复制上述key所需的内容。

输入ssh -T [email protected],测试添加ssh是否成功,如果看到Hi后面接你的用户名,即为成功。

修改Deployment值

在blog文件中找到**_config.yml**文件,修改Deployment值(在末尾),将

deploy:
  type:

更改为:

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

repository值是你在github项目里的https(右下角)

完成建站并新建博客

新建一篇博客,在blog文件下右键Git Bash Here,输入hexo new "博客名",你就可以在blog/source/_posts中找到已创建的文件。或者你直接在上述路径下创建md文件编写一篇新博客。Markdown文件的编写方式留个坑,之后有时间再写。

在生成以及部署文章之前,需要安装一个扩展,在Git中输入npm install hexo-deployer-git —save,并将刚刚生成的文件编辑好后输入hexo g && hexo d即可生成部署文章。

至此,一个具备基础功能的博客就完成了,可以通过用户名.github.io进行访问。

绑定自己的域名

这部分可有可无,域名可增加博客的个性化。

购买域名

国内的域名服务商有新网,腾讯云,还有阿里云的万网等。下面以阿里云的万网为例: 在万网购买了自己心仪的域名后,进入阿里云的管理控制台-域名与网站-域名就可以看到购买的域名此时的域名状态是未实名认证的,然后就是实名认证(一般需要2小时左右)。

域名解析

首先获取自己 github 的二级域名的 IP地址,windows 下直接在 cmd 里 Ping 一下自己的博客就会得到 IP 地址:

ping username.github.io,其中username为自己的github用户名

下面通过 DNS域名解析将购买的域名指向 github 的二级域名:username.github.io,进入阿里云的管理控制台-域名与网站-云解析 DNS,进入域名的解析设置,点击新手指导,将得到的 IP 地址填到记录值一栏,点击确定就 OK 了。填完以后的解析列表会出现:

设置CNAME

在本地hexo 项目下,source 文件夹下面创建 CNAME 文件(没有后缀名的),在里面写上购买的域名。比如:

【博客搭建1】基本框架搭建_第1张图片

在 github 上面,打开 username.github.io 项目的(Settings)设置,然后在 GitHub Pages的 Custom domain设置里填上购买的域名。比如:

这样新域名配置完成,可以使用新的网名访问自己的博客了

至此,博客的基本框架搭建完成,在博客搭建2、3中会分别介绍【Sakura主题的配置】及【Sakura主题下博客的编写操作】,使得个人博客更具个性。

你可能感兴趣的:(个人博客,github,html)