Giter Club home page Giter Club logo

Gitfolio Tweet GitHub release GitHub top language GitHub last commit GitHub

personal website + blog for every github user

Gitfolio will help you get started with a portfolio website where you could showcase your work + a blog that will help you spread your ideas into real world.

Check out this live demo to see gitfolio in action.

Getting Started

Let's Build

a. Clone this repo or simply download it.

git clone https://github.com/imfunniee/gitfolio.git

b. cd into the repo you just cloned or downloaded.

cd gitfolio # Navigate into the project folder
npm i # Install the required dependencies

c. Gitfolio is now ready to be used. The command

node build --name [username]

Will build your website using your GitHub username and put it in the dist/ folder.

d. To run your website navigate to ./dist/index.html in your browser. [you won't see blogs until you are on localhost]

🎉 Congrats, you just made yourself a personal website!

if you get stuck somewhere or get an error, please create an issue

Let's Customize

Forks

To include forks on your personal website just provide -f or --fork argument while building

$ node build --name username -f

Sorting Repos

To sort repos provide --sort [sortBy] argument while building. Where [sortBy] can be star, created, updated, pushed,full_name. Default: created

$ node build --name username --sort star

Ordering Repos

To order the sorted repos provide --order [orderBy] argument while building. Where [orderBy] can be asc or desc. Default: asc

$ node build --name username --sort star --order desc

Customize Themes

Themes are specified using the --theme [theme-name] flag when running the build command. The available themes are

  • light
  • dark

TODO: Add more themes

For example, the following command will build the website with the dark theme

$ node build --name username --theme dark

Customize background image

To customize the background image just provide --background [url] argument while building

$ node build --name username --background https://images.unsplash.com/photo-1557277770-baf0ca74f908?w=1634

You could also add in your custom CSS inside index.css to give it a more personal feel.

Let's Publish

Head over to GitHub and create a new repository named username.github.io, where username is your username. Push the files inside/dist folder to repo you just created.

Go To username.github.io your site should be up!!

Updating

To update your info, simply run

$ node update

This will update your info and your repository info.

To Update background or theme you need to run build command again.

Add a Blog

To add your first blog run this command.

$ node blog --title my-first-blog

(use "-" instead of spaces)

This will create a my-first-blog folder inside blog. Inside my-first-blog you will find an index.html file which contains all the necessary elements for writing a blog. Customize the content of the file to write your first blog.

This also adds content to blog.json file. This file helps in showcasing your blogs on your personal website as cards. You could customize the JSON object that corresponds your current blog.

Blog Demo? here

Default JSON Format

{
  "url_title": "my-first-blog", // the title you provide while creating a new blog, this appears in url
  "title": "Lorem ipsum dolor sit amet", // main title of blog
  "sub_title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", // sub-title of blog
  "top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450", // main image of blog
  "visible": true // don't worry about this
}

More Arguments for Blog

--subtitle [subtitle] : gives blog a subtitle (Default : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.')
--pagetitle [pagetitle] : gives blog page a title
--folder [folder] : give folder a title

(use "-" instead of spaces)

License

GitHub

Collignon-Ducret Rémi's Projects

beamium icon beamium

Prometheus to Warp10 metrics forwarder

cerebro icon cerebro

Infrastructure automation made fast

cheat-sheets icon cheat-sheets

A collection of cheat sheets usefull for web development

cir2-stage icon cir2-stage

Présentation de stage chez Vignal Systems (CIR2)

covid icon covid

Send COVID cases in Warp10 platform

docs icon docs

Official repository containing all docs & guides of OVH Group

elementz icon elementz

Jeu ElementZ codé en Java (cours d'IHM)

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.