Materialize Blog

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

Back-end base on Laravel 5.3, a PHP application framework with expressive, elegant syntax.

Front-end built with Vue, a Progressive JavaScript Framework bring data binding to js.

Demo at Forehalo' blog.

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.

composer create-project forehalo/materialize-blog blog

It will automatically install laravel and other dependencies for you.

Or you can install from this git repository manually

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.

Next step, migrate tables and seed fakers

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

Now you can login dashboard at /dashboard with name admin or email [email protected], password admin.

Images

Maybe you want to store all images to local, it gives you an simple way.

Create an symbolic link public/storage target storage/app/publicfolder.

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.

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.

Custom

All front-end assets has been compiled so you could directly use them without compiling manually.

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

yarn install    // or "npm install"

yarn is another package manager like npm, read more.

Resources are putted in /resources folder.

├─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.

Before working, ensure you know well about Vue and Sass.

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.

Dictionary used by Vue should be putted in resources/lang/your_lang/app.php

Modify the locale item value to your default language folder name in config/app.php. Done!

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

License

MIT

anjjriit / materialize-blog Goto Github PK