Git Product home page Git Product logo

www's Introduction

NiceTeam Web site

https://nice.team 用の静的サイトジェネレータアプリケーション

スクリプト

  • npm start
    • HotModuleReloadありでの開発用サーバの立ち上げ
  • npm run demo
    • プロダクションモードでの開発用サーバの立ち上げ
  • npm run build
    • webpackでアプリケーションをビルド
  • npm run gen
    • アプリケーションをビルドし、静的ファイルとして生成

ディレクトリ構成

  • assets
    • LESS、SASS、JavaScriptなどのコンパイルされていないアセット
      • blog
        • ブログ記事のmarkdownソース
  • components
    • Vue.js のコンポーネントファイル
  • layouts
    • テンプレートのベースとなるレイアウト
  • pages
    • このディレクトリ内のすべての.vueファイルを読み込み、アプリケーションのルーターを作成
  • plugins
    • vue.jsアプリケーションをインスタンス化する前に実行するJavaScriptプラグイン
  • static
    • 静的ファイル。robots.txt や favicon など。
  • store
    • vuex store ファイル

ブログ記事の書き方

  1. 任意のmarkdownエディタを用いて、思いつくがままの記事を書く
    基本的にはgithub準拠のmarkdownは利用可能

  2. assets/blog/${id}.md に任意のidで記事ファイルを作成する

  3. 2で作成したファイルの頭に、id,title,created,updated,tagsのyaml形式のmetaを付ける

  4. 静的レンダリング用に、pages/blog/${id}.vueファイルを作成する 中身は下の内容にする

<template>
	<Marked :src="src" />
</template>

<script>
	import src from '~assets/blog/${ここにid}.md'
	import Marked from '~components/Marked.vue'
	export default{
		head:{
			...Marked.baseHead(src),
		},
		components:{
			Marked
		},
		data(){
			return {
				src
			}
		}
	}
</script>
  1. blog/index.vuelistに書いた記事idを追記する
  2. 完了したら デプロイしてリリースする

####参考

www's People

Contributors

mkgaru avatar

Stargazers

 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.