快好知 kuaihz

只需一个GitHub账号,搭建一个属于自己的博客

引言

作为程序员拥有一个属于自己的个人技术博客,绝对是百利无一害的事,不仅方便出门装b,面试时亮出博客地址也会让面试官对你的好感度倍增。经常能在很多大佬的技术文章的文末,看到这样一句话: “欢迎大家访问我的博客”,每每看到这都会觉得好酷,同样是搞技术为啥人家那么优秀。而自己想要建一个博客,要么怕花钱,要么怕过程太麻烦,最后就不了了之。

应粉丝要求,今天手把手,嘴对嘴(放心吧,我才不稀罕亲你)的教大家搭建一个属于自己的技术博客,只要你有个github地址就行!还等啥呢?骚年,开整吧!

一、Hexo是个啥?

Hexo今天的主角,它是一款基于Node.js的静态博客(无需与后台交互,全由静态页面组成)框架,依赖少易于安装简单,更主要的是它免费啊,而且可以轻松的将生成的静态网页托管在GitHub,码云和Coding上,搭建博客首选框架之一。

二、准备工作

1、git安装

git下载地址:

安装完成后,检查git是否安装成功,如下显示即为成功。

$ git --version

git version 2.12.2.windows.2

复制代码

注意: 这里建议下边使用的所有命令,均在git命令行中执行,cmd中执行命令容易出现错误。

2、node.js安装

node.js 下载地址:/en/,选择稳定版本即可,node.js的安装非常简单,一步一步next即可。

安装完检查node是否安装成功,如下显示即为成功。

$ node -v

v12.16.1

L8000100617811+51536@L8000100617811 MINGW64 /d/myblog

$ npm -v

6.13.4

复制代码

三、Hexo 本地搭建

在你自己觉得最可爱的磁盘里,建一个文件夹专门用来存 myblog博客相关的文件。 文件夹内右键打开 Git Bash Here,在此窗口内执行以下所有命令。

1、安装 Hexo

用npm安装hexo,由于国内网络高“墙”深院,避免安装缓慢或失败,这里切换阿里的NPM镜像,没办法只能采用迂回战术了。

$ npm install -g cnpm --registry=

复制代码

用 cnpm 安装 hexo

$ cnpm install -g hexo-cli

复制代码

安装可能有一些缓慢,当然这还是取决于你的带宽,这个过程中会出现的WARN提示不用理会。

$ cnpm install hexo --save

复制代码

到这hexo就安装好了,检查一下hexo -v是否安装成功

$ hexo -v

hexo-cli: 3.1.0

os: Windows_NT 10.0.18362 win32 x64

node: 12.16.1

v8: 7.8.279.23-node.31

uv: 1.34.0

zlib: 1.2.11

brotli: 1.0.7

ares: 1.15.0

modules: 72

nghttp2: 1.40.0

napi: 5

llhttp: 2.0.4

http_parser: 2.9.3

openssl: 1.1.1d

cldr: 35.1

icu: 64.2

tz: 2019c

unicode: 12.1

复制代码

2、初始化 Hexo

Hexo安装完以后需要进行初始化操作。

$ hexo init

复制代码

注意:这时需要在myblog文件中,创建一个新的文件夹用来存放hexo博客文件。否则执行hexo init命令会报错。

进入hexo文件夹内右键打开 Git Bash Here,在此窗口内执行后边的所有命令。

$ hexo init

FATAL D:myblog not empty, please run `hexo init` on an empty folder and then copy your files into it

FATAL Something"s wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html

Error: target not empty

at Context.initConsole (C:Users)536AppDataRoamingpmode_moduleshexo-clilibconsoleinit.js:23:27)

复制代码

初始化成功后,hexo文件夹内会出现如下的文件:

node_modules: 依赖包 public:存放生成的页面 scaffolds:生成文章的一些模板 source:用来存放你的文章 themes:放下下载的主题 _config.yml: 博客的核心配置文件(设置主体、标题等属性)

接着需要执行一下cnpm install命令,要不下边的启动会提示命令不合法。

cnpm install

复制代码

最后用 hexo s -g 命令来启动安装好的 hexo。

$ hexo s -g

INFO  Start processing

INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

复制代码

直接访问http://localhost:4000显示如下页面,本地博客搭建成功。

四、Hexo 托管至 GitHub

1、创建GitHub仓库

这时候需要我们在GitHub上创建一个仓库,设置仓库的名字以XXX.github.io结尾

2、配置_config.yml文件

修改_config.yml文件,添加你创建的GitHub仓库地址

deploy:

type: git

repo: /YourgithubName/YourgithubName.github.io.git

branch: master

复制代码

安装部署命令deploy-git ,这样你才能用命令部署到GitHub。

$ cnpm install hexo-deployer-git  --save

复制代码

上边修改完毕以后,依次执行以下命令,提交本地hexo文件到GitHub。

hexo clean

hexo generate

hexo deploy

复制代码

3、线上测试

访问刚创建的仓库:https://chengxy-nds.github.io/,文件推送至GitHub后页面显示会有一定的延迟,稍等几十秒再次刷新页面,看到下边这些页面就表示博客部署成功。

4、设置个人域名

现在我们的博客地址:https://chengxy-nds.github.io/,但是看着是不是觉得有点low,如果有钱自己可以买一个域名。在云平台随便买一个,看自己喜好,例如:。

将域名指向GitHub的服务器地址, 192.30.252.153 和 192.30.252.154 。

进入存放博客的GitHub仓库,点击settings,设置Custom domain,输入域名

然后在本地博客文件source中创建一个名为CNAME文件,不要后缀。写上你的域名。

最后重新编译上传文件,访问:即可。

hexo clean

hexo generate

hexo deploy

复制代码

五、Hexo主题切换

虽然我们的博客搭建完成,但大家肯定也发现,现有的博客样式丑爆了,这时候就需要到挑一个自己喜欢的风格了。

1、下载主题

hexo主体:https://hexo.io/themes/,我们随便找一个主题替换演示一下,主题都托管在github上,直接clone就好。

2、配置_config.yml

可以看到hexo 只有一个默认的主题theme,现在进入theme文件夹执行git克隆命令,或者直接下载一个主题放入theme文件夹内都可以。

git clone /yelog/hexo-theme-3-hexo.git

复制代码

修改_config.yml文件中的theme属性

theme: hexo-theme-3-hexo

复制代码

打包上传看看效果:

hexo clean

hexo generate

hexo deploy

复制代码

3、测试

nice!主题已经替换成功,是比自带的好卡不少

六、Hexo基本操作

博客搭建完,接下来就要开始写博客,管理博客了~

创建我们的第一篇博客,会在source_posts目录下生成一个程序员内点事的第一篇博客.md文件

hexo n 程序员内点事的第一篇博客

复制代码

hexo基本配置

_config.yml是hexo框架最核心的文件,博客的配置基本在这里。

#博客名称

title: 我的博客

#副标题

subtitle: 一天进步一点

#简介

description: 记录生活点滴

#博客作者

author: John Doe

#博客语言

language: zh-CN

#时区

timezone:

#博客地址,与申请的GitHub一致

url: http://elfwalk.github.io

root: /

#博客链接格式

permalink: :year/:month/:day/:title/

permalink_defaults:

source_dir: source

public_dir: public

tag_dir: tags

archive_dir: archives

category_dir: categories

code_dir: downloads/code

i18n_dir: :lang

skip_render:

new_post_name: :title.md # File name of new posts

default_layout: post

titlecase: false # Transform title into titlecase

external_link: true # Open external links in new tab

filename_case: 0

render_drafts: false

post_asset_folder: false

relative_link: false

future: true

highlight:

enable: true

line_number: true

auto_detect: true

tab_replace:

default_category: uncategorized

category_map:

tag_map:

#日期格式

date_format: YYYY-MM-DD

time_format: HH:mm:ss

#分页,每页文章数量

per_page: 10

pagination_dir: page

#博客主题

theme: landscape

#发布设置

deploy:

type: git

#elfwalk改为你的github用户名

repository: /elfwalk/elfwalk.github.io.git

branch: master

复制代码

总结

至此,我们整个hexo博客就搭建完了,其实还是比较简单的,但到这里我们万里长征也只是走了第一步,后续还有更细致的操作,例如:博客建分类、标签、布局等,让我们的博客变得美美哒!

感兴趣的小伙伴不妨关注一波呦!

作者:程序员内点事链接:https://juejin.im/post/5e8834e1e51d4546f630812b

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:一个  一个词条  搭建  搭建词条  账号  账号词条  只需  只需词条  属于  属于词条  
开店

 人为什么要活着?

按照当地人的推荐,我们专程去了温尼伯一个叫做St Norbert Farmers Market的集贸市场。没想到我们在这儿认识了一位华人农场主。他的摊位摆满了土...(展开)

开店

 浙江新昌4位百亿富翁,坐拥111...

新昌县,隶属浙江省绍兴市,地处浙江省东部。新昌素有“东南眉目”之美誉,古称剡东,又名石城,历史文化悠久,自然风光奇异。新昌,八山半水分半田,是典型的山区县,土地...(展开)