All Projects → forehalo → Materialize Blog

forehalo / Materialize Blog

redesign blog using material design

Projects that are alternatives of or similar to Materialize Blog

Hexo Theme Fluid
🌊 一款 Material Design 风格的 Hexo 主题 / An elegant Material-Design theme for Hexo
Stars: ✭ 3,700 (+1645.28%)
Mutual labels:  blog, material-design, material
Gatsby Material Starter
A high performance blog starter with Material design in mind for GatsbyJS.
Stars: ✭ 456 (+115.09%)
Mutual labels:  blog, material-design, material
React Saas Template
🌊 Template for building an SaaS / admin website using React + Material-UI
Stars: ✭ 942 (+344.34%)
Mutual labels:  blog, material-design, material
Kross Hugo
Kross Creative Portfolio Template
Stars: ✭ 172 (-18.87%)
Mutual labels:  blog, material-design
Minimal Todo
Material To-Do App
Stars: ✭ 2,051 (+867.45%)
Mutual labels:  material-design, material
A beautiful app designed with Material Design 2 using Android X.
Stars: ✭ 170 (-19.81%)
Mutual labels:  material-design, material
Vuetify Todo Pwa
✔️ A simple Todo PWA built with Vue CLI 3 + Vuex + Vuetify.
Stars: ✭ 160 (-24.53%)
Mutual labels:  material-design, material
Preact Mdl
💥 A collection of Preact Components that encapsulate Google's Material Design Lite.
Stars: ✭ 179 (-15.57%)
Mutual labels:  material-design, material
React Native Paper Dates
Smooth and fast cross platform Material Design date and time picker for React Native Paper
Stars: ✭ 173 (-18.4%)
Mutual labels:  material-design, material
Vuedo is a blog platform, built with Laravel and Vue.js.
Stars: ✭ 2,226 (+950%)
Mutual labels:  blog, laravel
A Material design calendar inspired by the CalendarView of School Diary.
Stars: ✭ 196 (-7.55%)
Mutual labels:  material-design, material
Jekyll Material Theme
A Jekyll Theme based on Material Design using Materialize.
Stars: ✭ 165 (-22.17%)
Mutual labels:  material-design, material
Stars: ✭ 162 (-23.58%)
Mutual labels:  blog, laravel
This is the repo for FicSave, an open-source online fanfiction downloader.
Stars: ✭ 172 (-18.87%)
Mutual labels:  laravel, material
Material Apex
A Material Design Theme for Oracle APEX
Stars: ✭ 161 (-24.06%)
Mutual labels:  material-design, material
Store & retrieve your static content in plain text files
Stars: ✭ 175 (-17.45%)
Mutual labels:  blog, laravel
React Md
React material design - An accessible React component library built from the Material Design guidelines in Sass
Stars: ✭ 2,284 (+977.36%)
Mutual labels:  material-design, material
Iconshowcase Dashboard
A full-of-features, easy-to-customize, free and open source, Material Design dashboard for icon packs.
Stars: ✭ 197 (-7.08%)
Mutual labels:  material-design, material
Hubuntu Ui
Material Admin Dashboard Starter UI ( Ubuntu style ) -
Stars: ✭ 207 (-2.36%)
Mutual labels:  material-design, material
Laravel Blog Poetry All
Laravel诗词博客-匠心编程,热爱生活。喜欢就 Star 吧
Stars: ✭ 157 (-25.94%)
Mutual labels:  blog, laravel

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 [email protected], 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].