forehalo/materialize-blog

A new blog management system disigned according to Google Material Design.

Materialize Blog

A new blog management system designed according to Google Material Design., _(*1)

Back-end base on Laravel 5.3, a PHP application framework with expressive, elegant syntax., _(*2)

Front-end built with Vue, a Progressive JavaScript Framework bring data binding to js., _(*3)

Demo at Forehalo' blog., _(*4)

Feature

• Single page
• Creating with markdown (Javascript parser: marked, PHP parser: parsedown)
• Code highlight (Prism)
• Self host comments
• Easy localization
• Use sw-precache to cache static assets.

Install

Project

The php package manager composer is required for installing., _(*5)

composer create-project forehalo/materialize-blog blog

It will automatically install laravel and other dependencies for you., _(*6)

Or you can install from this git repository manually, _(*7)

git clone https://github.com/forehalo/materialize-blog.git blog
cd blog && composer install
cp .env.example .env
php artisan key:generate

Ensure you have finish all the steps mentioned in laravel docs., _(*8)

Next step, migrate tables and seed fakers, _(*9)

php artisan migrate
php artisan db:seed

The db:seed command will seed admin and settings table. If you want to pre-generate some mock data, run again with option --class=BlogSeeder, _(*10)

Now you can login dashboard at /dashboard with name admin or email admin@example.com, password admin., _(*11)

Images

Maybe you want to store all images to local, it gives you an simple way., _(*12)

Create an symbolic link public/storage target storage/app/publicfolder., _(*13)

ln -s /path/to/storage/app/public/ public/storage

So now, you can upload images and get it with url example.com/storage/images/image.jpg. All images stored in storage/app/public/images folder., _(*14)

Pages

Materialize-blog also provide a way to publish pages. What you need to do is just writing a markdown file and store it under storage/pages folder. Then, you can access it by url https://example.com/pages/{name}, name is the markdown file name without extension .md. There is an existent page named about. Try it out., _(*15)

Custom

All front-end assets has been compiled so you could directly use them without compiling manually., _(*16)

But if you don't like the default theme, hm... OK, install front-end environment and DIY., _(*17)

yarn install    // or "npm install"

yarn is another package manager like npm, read more., _(*18)

Resources are putted in /resources folder., _(*19)

├─assets
│  ├─fonts
│  │  └─material-design-icons        ------ icon files
│  ├─js                              ------ js workspace
│  │  ├─blog                           ------ user entery
│  │  │  ├─archives
│  │  │  ├─navigations
│  │  │  ├─pages
│  │  │  └─posts
│  │  ├─components                     ------ global components
│  │  └─dashboard                      ------ dashboard entery
│  │      ├─posts
│  │      └─settings
│  └─sass                            ------ sass workspace
│      ├─blog
│      └─dashboard
├─lang                               ------ language dictionary
│  ├─en
│  └─zh-CN
└─views
    ├─auth
    ├─blog
    └─dashboard

Style & Script

run the following command after install all dependencies. This will watch all assets files, and auto-compile when change saved., _(*20)

Before working, ensure you know well about Vue and Sass., _(*21)

yarn run dev

Language

You can esaily add another language support by adding a subfolder in resources/lang. Every file returns a php array. Copy and translate all the files., _(*22)

Dictionary used by Vue should be putted in resources/lang/your_lang/app.php, _(*23)

Modify the locale item value to your default language folder name in config/app.php. Done!, _(*24)

Then, use trans() global helper function in PHP, and this.$trans() in Vue components., _(*25)

License

MIT, _(*26)

Copyright (c) 2015-2017 Forehalo, _(*27)