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