Skip to content
This repository has been archived by the owner. It is now read-only.
redesign blog using material design
PHP Vue JavaScript HTML
Branch: master
Clone or download
Latest commit c88d02a Dec 8, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
app fix common issues for sqlserver Nov 1, 2018
bootstrap init Jan 3, 2016
config fix common issues for sqlserver Nov 1, 2018
database fix common issues for sqlserver Nov 1, 2018
public build Feb 26, 2017
resources generate service worker handler in root directory Feb 26, 2017
routes enable image upload Jan 11, 2017
storage enable image upload Jan 11, 2017
.env.example enable comment notification Dec 27, 2016
.gitattributes begin vuerify Nov 14, 2016
.gitignore ignore .DS_Store Feb 22, 2017
artisan init Jan 3, 2016
composer.lock fix common issues for sqlserver Nov 1, 2018
package.json move marked to dependencies Dec 7, 2016
phpunit.xml begin vuerify Nov 14, 2016
server.php begin vuerify Nov 14, 2016
sw-precache.config.js generate service worker handler in root directory Feb 26, 2017
yarn.lock upgrade dependencies Dec 24, 2016

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.


  • 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.



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 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, password admin.


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 All images stored in storage/app/public/images folder.


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{name}, name is the markdown file name without extension .md. There is an existent page named about. Try it out.


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.

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

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


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.



Copyright (c) 2015-2017 Forehalo

You can’t perform that action at this time.