Gitfolio

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

git clone https://github.com/imfunniee/gitfolio.git # Clone the repo
cd gitfolio # Navigate into the project folder
npm i # Install the required dependencies

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. If you want to use a different folder, you can specify it by setting the --out flag.

node build --name [username] --out [directory]

To open your site, run

open dist/index.html

If you specified a different output directory, replace dist/ with the directory you used. Congrats, you just made yourself a personal website!

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

Let's Customize

Enabling 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

Push the files to github. You can host your website using github pages by naming your repo username.github.io. You can also your custom domain.

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, make sure the title don't have spaces instead use "-".

$ node blog --title my-first-blog

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 (Deafult : '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)

Enable Blogs

Blog are disabled by default. To enable them head over to assets/index.html and find <div id="blog_section" style="display:none;">. Remove the style attribute to show your blogs on your personal website.

If you have run build command before adding a blog you need have to remove the style attribute from index.html file aswell.

License