整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
lementUl是餓了么前端團(tuán)隊(duì)推出的桌面端UI框架，具有是簡潔、直觀、強(qiáng)悍和低學(xué)習(xí)成本等優(yōu)勢(shì)，非常適合初學(xué)者使用。因此，本次項(xiàng)目使用ElementUI 框架來完成 個(gè)人博客的主體開發(fā)，歡迎大家討論和交流。
1. 安裝
本次開發(fā)使用 vs code + node +element-ui，因此需要事先完成軟件安裝：
下載：vs code, node, element-ui 推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用：
npm i element-ui -S
2. 創(chuàng)建項(xiàng)目
打開vs code 進(jìn)入擬創(chuàng)建項(xiàng)目的文件夾，創(chuàng)建新建終端進(jìn)入命令行模式：
vue init webpack blog-demo // 創(chuàng)建項(xiàng)目： blog-demo， 等待項(xiàng)目初始化完成
cd blog-demo
npm run dev // 啟動(dòng)， 默認(rèn)端口8080
瀏覽器打開網(wǎng)址：http://localhost:8080
3. 前臺(tái)頁面
在創(chuàng)建src/pages/article 和 src/pages/home 文件夾：
分別添加 頁面詳情 和 表頭 和 登錄控制：
增加密碼驗(yàn)證：
最終效果：
這樣我們就完成了一個(gè)簡單個(gè)人 博客前端部分了， 小伙伴們是不是覺得很簡單呢？，如大家如需要源碼，歡迎聯(lián)系www.infersite.com
天給大家推薦一個(gè)開源個(gè)人博客網(wǎng)站。
一個(gè)基于.Net 6開發(fā)的個(gè)人博客網(wǎng)站，功能完備。非常使用用來搭建個(gè)人博客、資源分享。
1、跨平臺(tái)：這是基于.Net Core開發(fā)的系統(tǒng)，可以部署在Docker, Windows, Linux, Mac。
2、數(shù)據(jù)庫支持：Microsoft SQL Server, MySQL。
3、 前端采用LayUI框架。
4、 基于.Net 6 + Sqlsugar + Mysql + redis + LayUI開發(fā)。
1、文章管理：文章列表、添加、修改、刪除文章。
2、輪播圖：首頁輪播圖
3、欄目管理：欄目列表、欄目管理，支持多級(jí)。
4、標(biāo)簽管理：文章標(biāo)簽管理
5、友情鏈接
6、通知公告
7、時(shí)間軸
文章管理
輪播圖
欄目管理
標(biāo)簽管理
友情鏈接
通知公告
時(shí)間軸
私信回復(fù)：1023
天在翻看自己GitHub的時(shí)候，忽然發(fā)現(xiàn)了那會(huì)剛開始做前端的時(shí)候搭建的博客，好幾年前了，看到新奇的東西就想自己動(dòng)手鼓搗一下，回想起那會(huì)搭建的時(shí)候也是費(fèi)了老鼻子的勁了，最近一年也會(huì)偶爾在CSDN寫博客記錄點(diǎn)東西，那便記錄一下怎么利用GitHub和hexo來搭建一個(gè)屬于自己的博客網(wǎng)站。
官方給我們的描述是快速、簡潔且高效的博客框架。Hexo是一款基于Node.js的靜態(tài)博客框架，依賴少易于安裝使用，支持 Markdown 的所有功能，一鍵部署，只需要一個(gè)指令就可以部署到github pages或者其他平臺(tái)，支持多種模板引擎和工具。
要用GitHub 和 hexo 搭建個(gè)人的博客網(wǎng)站，首先必須有自己的github賬號(hào)沒什么問題吧，其次需要提前準(zhǔn)備的環(huán)境：下載安裝git, nodeJs，這個(gè)怎么去安裝我想應(yīng)該不用說了吧（真不知道的話分別百度nodejs， git去官網(wǎng)點(diǎn)擊下載安裝即可）。準(zhǔn)備好環(huán)境后我們還要安裝 hexo:
npm install hexo-cli -g
前面安裝了nodejs，現(xiàn)在就i可以直接用 npm安裝 hexo，同時(shí)按下 window + R 鍵，輸入 cmd 打開終端，執(zhí)行上面的命令，等待安裝完成，完成以后可用
hexo -v 查看版本，同時(shí)也是驗(yàn)證是否安裝完成。
如上圖說明我們已經(jīng)安裝完成了，然后我們來初始化我們的hexo項(xiàng)目:
// blog 是你的項(xiàng)目名字，取什么名字都行您隨意
hexo init blog
然后進(jìn)入你的項(xiàng)目中，安裝依賴：
cd blog // 進(jìn)入項(xiàng)目中
npm install // 安裝依賴包
完成后你的項(xiàng)目目錄應(yīng)該包含：
hexo server
打開hexo的服務(wù)，在瀏覽器輸入http://localhost:4000/ 就可以打開你的博客了。
前面說過你要有自己的 github 賬號(hào)，如果你還沒有，去注冊(cè)一個(gè)吧，注冊(cè)完成后登錄到GitHub頁面，你會(huì)看到一個(gè) New repository， 創(chuàng)建一個(gè)和你用戶名同名的倉庫，后面加上.github.io， 只有這樣將來部署到 Github Page 的時(shí)候， 才會(huì)被識(shí)別， 也就是 用戶名.github.io， 我已經(jīng)創(chuàng)建過了，再次創(chuàng)建會(huì)提示 The repository **xxx.github.io** already exists on this account.，表示我這個(gè)賬戶已經(jīng)創(chuàng)建過這個(gè)倉庫。
如果你已經(jīng)創(chuàng)建完成了和你注冊(cè)GitHub同名的倉庫，下面我們來生成ssh密鑰：
在你項(xiàng)目文件夾點(diǎn)擊鼠標(biāo)右鍵，點(diǎn)擊 git base hero, 打開你的 git base 后，在base中分別輸入：
git config --global user.name "yourname" // yourname輸入你的github用戶名
git config --global user.email "youremail" // youremail輸入你GitHub的郵箱
可以檢查一下你有沒有輸對(duì)
git config user.name
git config user.email
創(chuàng)建ssh密鑰，一路回車，可以不設(shè)置密碼
ssh -keygen -t rsa -C "youremail"
生成完成后，進(jìn)入你的用戶名文件夾下，找到.ssh 文件夾，里面有兩個(gè)文件。這個(gè)就是密鑰，其中 id_rsa是你電腦的私人密鑰，id_rsa.pub 是公共密鑰。我們要做的就是把公鑰配置到GitHub中，這樣當(dāng)你訪問鏈接自己的GitHub賬號(hào)時(shí)，它就會(huì)根據(jù)公鑰配到你的私鑰，當(dāng)能達(dá)到匹配的時(shí)候，你就能通過git上傳你的項(xiàng)目到GitHub中了。
下面我們來配置自己的ssh密鑰，進(jìn)入你的GitHub頁面，點(diǎn)擊右上角你的賬號(hào)頭像，在下拉菜單中找到 settings 菜單，點(diǎn)擊進(jìn)入設(shè)置頁面，然后在設(shè)置頁面左邊的菜單分類中找到 Access 下面的 SSH and GPG keys 菜單，然后點(diǎn)擊 New SSH key 按鈕，把你本地創(chuàng)建的公鑰復(fù)制后粘貼到key 的輸入框中， title 隨便輸都行，然后保存。在gitbase中查看是否成功
ssh -T git@github.com
如何將hexo和github關(guān)聯(lián)起來呢，那就要把hexo生成文章部署到GitHub上，打開站點(diǎn)配置文件_config.yml, 翻到最后，修改配置：xxx為你的github賬戶
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/xxx/xxx.github.io.git
branch: master
要完成部署操作，你還需要安裝 deploy-git ：
npm install hexo-deployer-git --save
然后我們需要了解一下hexo的常用命令：
// 新建一個(gè)網(wǎng)站，如果沒設(shè)置 floder hexo默認(rèn)在當(dāng)前文件夾下創(chuàng)建網(wǎng)站
hexo init [flolder]
// 新建一篇文章，如果沒有設(shè)置 layout 的話，默認(rèn)使用 _config.yml 中的 default_layout 參數(shù)代替。如果標(biāo)題包含空格的話，請(qǐng)使用引號(hào)括起來。
hexo new [layout] <title>
// 生成靜態(tài)文件。
hexo generate // hexo g -d, 文件生成后立即部署網(wǎng)站
// 發(fā)表草稿
hexo publish [layout] <filename>
// 啟動(dòng)服務(wù)器。默認(rèn)情況下，訪問網(wǎng)址為： http://localhost:4000
hexo server
// 部署網(wǎng)站, 可以簡寫為hexo d
hexo deploy
// 清除緩存文件 (db.json) 和已生成的靜態(tài)文件 (public)
hexo clean
hexo generate 顧名思義，生成靜態(tài)文章，可以用 hexo g縮寫 hexo deploy 部署文章，可以用hexo d縮寫
當(dāng)然你也可以用 hexo g -d 一步完成部署。
如果在執(zhí)行部署網(wǎng)站的時(shí)候出現(xiàn)下列錯(cuò)誤: ”Software caused connection abort fatal: Could not read from remote repository.”, 很可能是dns解析問題，用 ssh -T git@github.com 在gitbase中檢測是否正常，打開cmd輸入ping github.com是否能連接，配置本地的hosts 文件， 文件路徑 c:\windows\system32\drivers\etc\hosts,在末尾添加上：
140.82.112.4 github.com git 140.31.16.184 github.global.ssl.fastly.net 復(fù)制代碼
gitbase 再次ssh -T git@github.com成功。
參數(shù) | 描述 |
title | 網(wǎng)站標(biāo)題 |
subtitle | 網(wǎng)站的副標(biāo)題 |
description | 網(wǎng)站描述 |
keywords | 網(wǎng)站的關(guān)鍵詞。支持多個(gè)關(guān)鍵詞。 |
author | 作者名字 |
language | 網(wǎng)站使用的語言。對(duì)于簡體中文用戶來說，使用不同的主題可能需要設(shè)置成不同的值，請(qǐng)參考你的主題的文檔自行設(shè)置，常見的有 zh-Hans和 zh-CN。 |
timezone | 網(wǎng)站時(shí)區(qū)。Hexo 默認(rèn)使用您電腦的時(shí)區(qū)。般的，對(duì)于中國大陸地區(qū)可以使用 Asia/Shanghai。 |
參數(shù) | 描述 | 默認(rèn)值 |
url | 網(wǎng)址, 必須以 http:// 或 https:// 開頭 | |
root | 網(wǎng)站根目錄 | / |
permalink | 文章的 永久鏈接 格式 | :year/:month/:day/:title/ |
permalink_defaults | 永久鏈接中各部分的默認(rèn)值 | |
pretty_urls | 改寫 permalink 的值來美化 URL | |
pretty_urls.trailing_index | 是否在永久鏈接中保留尾部的 index.html，設(shè)置為 false 時(shí)去除 | true |
pretty_urls.trailing_html | 是否在永久鏈接中保留尾部的 .html, 設(shè)置為 false 時(shí)去除 (對(duì)尾部的 index.html無效） | true |
我們?cè)谂渲梦募袑rl改成自己的網(wǎng)站域名，permalink是我們生成文章時(shí)候的那個(gè)鏈接格式。鏈接的變量很多，可以點(diǎn)擊上面的永久鏈接去官方文檔查找配置。
# Directory
source_dir: source # 資源文件夾，這個(gè)文件夾用來存放內(nèi)容。
public_dir: public # 公共文件夾，這個(gè)文件夾用于存放生成的站點(diǎn)文件。
tag_dir: tags # 標(biāo)簽文件夾
archive_dir: archives # 歸檔文件夾
category_dir: categories # 分類文件夾
code_dir: downloads/code # Include code 文件夾，source_dir 下的子目錄
i18n_dir: :lang # 國際化（i18n）文件夾
skip_render: # 跳過指定文件的渲染
如果您剛剛開始接觸 Hexo，通常沒有必要修改這一部分的值。
# Writing
new_post_name: :title.md # 新文章的文件名稱
default_layout: post # 預(yù)設(shè)布局
titlecase: false # 把標(biāo)題轉(zhuǎn)換為 title case
auto_spacing: false # 在中文和英文之間加入空格
external_link:
enable: true # Open external links in new tab
field: site # Apply to the whole site
exclude: '' # 需要排除的域名
filename_case: 0 # 把文件名稱轉(zhuǎn)換為 (1) 小寫或 (2) 大寫
render_drafts: false # 顯示草稿
post_asset_folder: false # 啟動(dòng) Asset 文件夾
relative_link: false # 把鏈接改為與根目錄的相對(duì)位址
future: true # 顯示未來的文章
highlight: # 代碼塊的設(shè)置, 請(qǐng)參考 Highlight.js 進(jìn)行設(shè)置
enable: true
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs: # 代碼塊的設(shè)置, 請(qǐng)參考 PrismJS 進(jìn)行設(shè)置
enable: false
preprocess: true
line_number: true
tab_replace: ''
# Category & Tag
default_category: uncategorized # 默認(rèn)分類
category_map: # 分類別名
tag_map: # 標(biāo)簽別名
# Pagination
per_page: 10 # 每頁顯示的文章量 (0=關(guān)閉分頁功能)
pagination_dir: page # 分頁目錄
通常情況下，Hexo 主題是一個(gè)獨(dú)立的項(xiàng)目，并擁有一個(gè)獨(dú)立的 _config.yml 配置文件。
除了自行維護(hù)獨(dú)立的主題配置文件，你也可以在其它地方對(duì)主題進(jìn)行配置。
hexo官網(wǎng)有300多個(gè)主題，在這里下載你喜歡的主題進(jìn)行修改就可以了。直接在github鏈接上下載下來，然后放到theme文件夾下就行了，然后再在剛才說的配置文件中把theme換成那個(gè)主題文件夾的名字，它就會(huì)自動(dòng)在theme文件夾中搜索你配置的主題。
我們也可以自定義自己的主題，或者修改已經(jīng)安裝的主題的樣式。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
