我的第一篇博客文章——博客的搭建

文章目录
  1. 1. Scholar的博客搭建
    1. 1.1. Hello world !
    2. 1.2. 一、环境的搭建
    3. 1.3. 二、博客的编辑
    4. 1.4. 三、将博文部署至远端
    5. 1.5. 四、下载主题
    6. 1.6. 五、编辑及修改主题
    7. 1.7. 六、使用Hexo Admin插件让编辑博客更简单

Scholar的博客搭建

Hello world !

由于互联网与计算机技术的迅猛发展使得个人博客的搭建门槛直线降低,方便易用的开发工具与框架代码使得一切如此简单。
本文将简述博客如何搭建

一、环境的搭建

使用的硬件环境为:64位电脑
使用的软件环境为:Windows10家庭中文版,node.js(基于 Chrome V8 引擎的 JavaScript 运行环境)、git与Hexo框架,来搭建属于自己的博客。
使用工具node.js的下载:https://nodejs.org/en/(选择LTS版本)
默认安装即可,截图如下:

一路Next,完全安装后,再使用Power shell验证安装是否成功。Win+R键入Power shell中,输入node -v回显版本号,输入npm -v回显版本号。截图如下:
接着使用npm工具(Node.js 平台的默认包管理工具)下载淘宝维护的npm镜像即cnpm,在Power shell中,
输入npm install -g cnpm –registry=https://registry.npm.taobao.org
回车后即开始下载,完成后如图:

接着验证cnpm是否存在,在Power shell中,输入cnpm -v将会回显路径等信息,截图如下:

如果存在,那么可以使用cnpm来下载Hexo框架,
即在Power shell中,输入cnpm install -g hexo-cli回车即开始下载,完成后截图如下:

接着验证Hexo框架是否存在,在Power shell中,输入hexo -v回车即可回显版本号。截图如下:

为了使用init初始化命令而不报错需要安装git(分布式版本控制系统),那么现在开始安装git吧!
首先进入git官网https://git-scm.com/
选择与自己电脑对应的版本,进行下载即可。
安装截图如下:

选择NEXT

自定义安装位置

选择关联文件

默认路径及选择是否不要创建开始菜单

默认选择vim作为git的编辑器

默认选择使用git命令的工具

默认使用OpenSSL来加密HTTP传输的信息

选择提交代码的风格为默认

使用minTTY为git的终端
一路NEXT直到Install

默认不开启实验功能,选择Install即可安装。

选择Finish即可完成安装
为了使得PowerShell可以使用git命令,需关闭Powershell并重启。
接着在自定义的目录中创建用于存储blog框架的文件夹(D:\Program file\blog)
然后在PowerShell中输入:
cd “D:\Program file\blog” //进入文件夹
hexo init //初始化博客框架
截图如下:

这样Hexo博客框架已经初始化完成。
输入ls查看目录下生成的文件,截图如下:

输入hexo s即可启动博客框架,截图如下:

这样在本地就启动了hexo博客,在游览器地址栏中输入:http://localhost:4000 即可打开自动生成的博客,如果要停止服务在Powershell中按Ctrl+C即可。
在本地游览器中的显示截图如下:

至此博客在本地已搭建完成,接着就是对博客的编辑。

二、博客的编辑

在Powershell中输入:
hexo n “ My first blog post “
即在D:\Program file\blog\source_posts目录下创建了一个名为” My first blog post “的Markdown格式的文件,接着你可以手动打开这个文件,推荐使用Yu Writer对其进行编辑,当然Typora也是个不错的选择。

使用hexo clean命令可以清除缓存文件
使用hexo g 命令可以生成静态网页文件
使用hexo s命令可以开启服务

更新后的游览器截图如下:

三、将博文部署至远端

在已注册好的Github中创建仓库项目,设置域名为:
如图:

选择Create repository继续
在Powershell下输入:
cnpm install –save hexo-deployer-git //安装git插件
安装成功后截图如下:

然后ls查看文件,使用编辑器对_config.yml文件进行编辑
添加如下内容:
type:git
repo:https://github.com/scholargeek/scholargeek-.github.io.git
branch:master
保存即可。
接着在Powershell下输入:
git config –global user.email “you@example.com
git config –global user.name “Your Name”
注:
you@example.com替换为在GitHub上注册的邮箱
将Your Name替换为GitHub上注册的用户名

最后可以在Powershell下输入hexo d 就可以将博客上传至github服务器上。
回到Github的仓库管理页,刷新即可查看上传的文件。
验证网络服务可以直接在游览器中输入https://scholargeek.github.io/ 查看博客网页。

四、下载主题

在Powershell下输入git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
即可将yilia主题下载至D:\Program file\blog\themes\yilia文件夹下。
编辑_config.yml文件,设置主题theme: landscape,将landscape替换为yilia,即可更换主题。

如果下载主题时出现以下错误:

则需设置缓存区的大小
在Powershell下输入:git config –global http.postBuffer 524288000
再次输入:
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia即可

其他主题推荐:
git clone -b master https://github.com/Molunerfinn/hexo-theme-melody themes/melody

注:使用下载的命令需进入blog目录执行

五、编辑及修改主题

可以在 D:\Program file\blog_config.yml 中修改大部分的配置,参数如下:
#Site
title: Scholar’s Blog //网站标题
subtitle: Welcome to my blog! //网站副标题
description: Geek Style //网站的描述
keywords:
author: DSL //作者
language: zh-cn //使用的语言
timezone: Asia/Shanghai //网站的时区
#Extensions
##Plugins: https://hexo.io/plugins/
##Themes: https://hexo.io/themes/
theme: landscape //使用的主题为默认的landscape,可将landscape修改为yilia,
//保存即完成主题的更换

六、使用Hexo Admin插件让编辑博客更简单

在Powershell下进入blog目录下输入:npm install –save hexo-admin
安装完成后启动服务,在浏览器地址栏中输入网址:localhost:4000/admin,即可对所有的博客进行管理何编辑。
为了能为添加图片,首先配置好D:\Program file\blog_config.yml文件,将post_asset_folder:false中false替换为为true,再在Powershell下进入blog目录下输入:
npm install hexo-asset-image –save //安装image工具
安装完成截图如下:

这样就可以使用

在Powershell中常用的命令:
hexo clean //清除缓存与静态网页
hexo g //生成静态网页
hexo s //开启本地预览服务
hexo d //推送到远端的网络服务器中


版权声明

Scholar’s Blog by scholargeek is licensed under a Creative Commons BY-NC-ND 4.0 International License.
董仕麟创作并维护的scholargeek博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证

本文首发于Scholar’s Blog博客,版权所有,侵权必究。

本文永久链接:https://scholargeek.github.io/2019/07/12/%E6%88%91%E7%9A%84%E7%AC%AC%E4%B8%80%E7%AF%87%E5%8D%9A%E5%AE%A2%E6%96%87%E7%AB%A0/

更新日期:


本站总访问量