手牽手，咱們一塊兒搭建VuePress博客

時間  2019-12-05
標籤 手牽手 咱們 一塊兒 搭建 vuepress 博客 简体版
原文   原文鏈接

平時Google搜問題的時候，不少方案都是連接到博客上的，有簡書、博客園、思否等等，固然，還有不少我的搭建的博客，風格各異。慢慢的，本身又有了自搭博客的想法，一是做爲本身工做踩坑的學習記錄，兩者萬一哪天也能幫到別人解決了什麼問題，豈不美哉css

選定VuePress

先後利用工做之餘想了幾種方案，也考慮過Hexo，也是很火的博客搭建工具，但又想借此機會，學習一下新技術，VuePress是我所在一個技術交流羣裏一位大佬推薦的，我瞭解以後，確實很喜歡， 它有如下幾個特色：html

  • 輕易上手，配置簡單
  • Vue驅動，享用Vue+webpack開發環境，能夠自定義Vue組件
  • 性能高效

其實上面的優勢官網都有介紹，我比較承認，再贅述一遍前端

詳情請瀏覽VuePress中文網vue

開始安裝

# 全局安裝 VuePress
yarn global add vuepress # 或者用 npm install -g vuepress
複製代碼

爲了方便省事，免去從新構建整個項目的時間，能夠從官網demo那裏clone下來整個項目，到後面根據本身的狀況再去修改webpack

# cd 到你要保存blog的文件夾， 而後clone
git clone git@github.com:docschina/vuepress.git
複製代碼

啓動調試

cd vuepress    //進入項目根目錄
yarn           //安裝依賴
yarn dev       //啓動調試服務
複製代碼

當終端中出現 VuePress dev server listening at http://localhost:8080/ 就說明項目已經正常啓動調試了，你能夠在瀏覽器輸入http://localhost:8080/預覽整個博客項目git

Blog首頁

修改項目結構

你看到的項目結構應該是下面這樣的github

.
├── .vuepress
│   ├── components  
│   ├── config.js   // 網站基礎配置文件，主要修改的文件
│   └── public      // 存放網站靜態資源，例如圖片
├── config
│   └── README.md          
├── default-theme-config
│   └── README.md          
├── guide                  
│   ├── README.md
│   ├── assets.md
│   ├── basic-config.md
│   ├── custom-themes.md
│   ├── deploy.md
│   ├── getting-started.md
│   ├── i18n.md
│   ├── markdown.md
│   └── using-vue.md
├── zh                      // 咱們須要的中文配置
|   ├── README.md           // 首頁配置文件
│   ├── config
│   ├── default-theme-config
│   └── guide
└── README.md               // 首頁配置文件
複製代碼

由於咱們主要是中文界面，不考慮英文，因此，能夠直接把zh文件夾裏的全部文件移動到上層目錄，覆蓋原有的guide、 default-theme-config、config,以及首頁配置文件README.md 完成以後應該是這樣的目錄結構web

.
├── .vuepress
│   ├── components        
│   ├── config.js         
│   └── public            
├── config
│   └── README.md            // 可刪除
├── default-theme-config     // 這個也能夠刪，或者改爲本身須要的
│   └── README.md
├── guide                    // 也可刪除，建議根據這個修改爲本身的blog內容
│    ├── README.md
│    ├── assets.md
│    ├── basic-config.md
│    ├── custom-themes.md
│    ├── deploy.md
│    ├── getting-started.md
│    ├── i18n.md
│    ├── markdown.md
│    └── using-vue.md
├── README.md                 
複製代碼

網站基本配置

在.vuepress下的config.js裏，包括了網站須要設置的標題、描述等基本信息npm

簡單列舉一些，由於沒有留原來的，附上的是我修改後的json

module.exports = {
  dest: 'vuepress',	// yarn 打包生成的文件地址，在根目錄下會有一個vuepress文件夾
  locales: {	// 語言配置
    '/': {
      lang: 'zh-CN',
      title: 'devZhang',	// 網站標題
      description: 'Something Good Will Be Happen!'	// 網站描述，顯示在標題下面
    }
  },
  head: [	// 額外添加到當前頁面 <head>標籤裏的標籤
    ['link', { rel: 'icon', href: `/logo.png` }],
    ['link', { rel: 'manifest', href: '/manifest.json' }],
    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
    ['link', { rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png` }],
    ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
    ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
    ['meta', { name: 'msapplication-TileColor', content: '#000000' }]
  ],
  serviceWorker: true,		// VuePress支持PWA配置
  theme: 'vue',				// 主題文件
複製代碼

經過上面的serviceWorker配置，配合public裏的manifest.json配置icons圖標使用。

配置網站首頁

在.docs下的README.md就是網站首頁配置文件，如下是我修改保留的東西，把沒用的都刪了

---
home: true					// 是否啓用首頁默認佈局
heroImage: /alone.png	//	首頁顯示的圖片地址
actionText: Go Blog →	//	首頁按鈕的文字
actionLink: /js/			//	點擊首頁按鈕後連接的路徑
---
複製代碼

個人首頁效果展現：

配置網站結構

下面是我在官方Demo基礎上修改後的網站結構，可供參考

themeConfig: {
    repo: 'dvxiaofan',	// github名稱，能夠加參數(/項目名)，直接到項目。 只寫用戶名就會直接到你github首頁
    editLinks: false,	// 每篇文章底部是否顯示查看原文和編輯， 不須要，就設置爲false
    docsDir: 'docs',	
    locales: {		//	網站頂部的導航欄配置
      '/': {
        nav: [
          {
            text: 'Web前端',	// 顯示名字
            items: [			// 下面有二級目錄，就這樣設置
					{
                text: 'JS',
                link: '/js/'
				},
              	{
                 text: 'CSS',
                 link: '/css/'
               },
               {
                 text: 'HTML',
                 link: '/html/'
               },
					]
					},
					{
						text: '輪子',
						items: [
							{
                			text: 'Echarts',
                			link: '/echarts/'
							},
              			{
                			text: 'Vue',
                			link: '/vue/'
              			},              
						]
					},
          {
            text: '生活隨筆',
            link: '/lifes/'
          },
          {
            text: '關於',
            link: '/about/'
          }
        ],
        sidebar: {	// 側邊欄配置
					'/js/': jsSidebarConfig('JS相關'),
					
        }
      }
    }
  }
}
// 側邊欄具體配置
function jsSidebarConfig (title) {
  return [
    {
      title,
      collapsable: false,	// 是否可摺疊
      children: [				// 對應每一篇文章，省略了`.md`擴展名
        '',						// 默認對應`README.md`
        'js01',
        'js02',
        'js03',
        'js04',
        'js05',
      ]
    }
  ]
}

複製代碼

網站頂部目錄效果展現

部署上線

在運行yarn build以後生成的是靜態頁面，咱們須要把打包生成的vuepress文件夾中的內容託管到服務器，這樣才能真能的經過網絡瀏覽咱們的博客。 暫時能夠用GitHub來託管，省去了本身花錢買服務器和域名的繁瑣。

咱們須要在GitHub上創建兩個倉庫， 一個是平時新增維護整個博客用的， 一個用來託管博客打包後的文件

好比，我創建了一個MyBlog 和 dvxiaofan.github.io

注意 這個dvxiaofan.github.io裏 前面的名字是你的GitHub用戶名， 必須如出一轍！我GitHub名是dvxiaofan,因此項目名就是前面的樣子

第一個倉庫就放整個項目，具體git操做再也不贅述。

編寫發佈腳本

爲了方便之後發佈使用，打開項目跟目錄下的 scripts文件夾裏的 deploy-gh.sh文件， 修改爲下面這樣

cd vuepress		// 進入到打包好的輸出文件夾
git init			
git add -A
git commit -m 'deploy'
git push -f git@github.com:dvxiaofan/dvxiaofan.github.io.git master	// 代碼上傳到前面創建的第二個倉庫的master分支， 你須要替換成本身的
複製代碼

查當作果

把上面的文章保存，在終端裏cd到整個項目目錄下，而後執行yarn deploy-gh， 腳本就會開始執行，知道最後結束，代碼提交部署成功， 你就能夠輸入托管博客的查看地址https://dvxiaofan.github.io， 沒問題的話，你應該會看到本身的博客了。

小結

此次就先寫到這裏，後期有時間會把博客部署到本身的域名上去，到時候再來更新文章

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程