2019-05-09 16:19:54 +00:00
< img src = "https://i.imgur.com/eA6clZr.png" >
2019-05-18 16:12:19 +00:00
# Gitfolio [](https://twitter.com/intent/tweet?text=personal%20website%20and%20a%20blog%20for%20every%20github%20user%20&url=https://github.com/imfunniee/gitfolio)    
2019-05-09 16:19:54 +00:00
2019-05-14 12:17:02 +00:00
### personal website + blog for every github user
2019-05-09 16:19:54 +00:00
2019-05-18 16:10:55 +00:00
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.
2019-05-09 16:19:54 +00:00
# Getting Started
### Let's build
2019-05-12 13:39:32 +00:00
a. Clone this repository using ``git clone https://github.com/imfunniee/gitfolio.git`` or just simply download it.
2019-05-09 16:19:54 +00:00
2019-05-12 13:52:18 +00:00
```
$ git clone https://github.com/imfunniee/gitfolio.git
```
2019-05-12 13:39:32 +00:00
b. Now ``cd`` into the repository you just cloned ``cd gitfolio`` and run the below command
2019-05-09 16:19:54 +00:00
```
$ npm i
```
This will install all the dependencies you will need to build your website.
c. After its done installing the dependencies run this command where `username` is your username on github
```
$ node build --name username
```
This will create `index.css` and `index.html` files in your working directory.
d. Congrats, you just made yourself a personal website.
e. To run your website open `index.html` or simply type `index.html` and hit enter in your terminal.
> if you get stuck somewhere or get an error, please create an issue
### Let's customize
#### Enabling Dark theme
To enable dark theme just provide `--dark` as an argument while building
```
$ node build --name username --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
2019-05-19 05:50:14 +00:00
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.
2019-05-09 16:19:54 +00:00
### Updating
2019-05-12 13:39:32 +00:00
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.
2019-05-09 16:19:54 +00:00
### Add a Blog
2019-05-12 13:39:32 +00:00
To add your first blog run this command, make sure the title don't have spaces instead use "-".
2019-05-09 16:19:54 +00:00
```
$ 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.
2019-05-13 04:39:20 +00:00
This also adds content to `blog.json` file. This file helps in showcasing your blogs on your personal website as [cards ](https://imfunniee.github.io/gitfolio/#blog_section ). You could customize the JSON object that corresponds your current blog.
Blog Demo? [here ](https://imfunniee.github.io/gitfolio/blog/my-first-blog/ )
2019-05-09 16:19:54 +00:00
Default JSON Format
```
{
2019-05-09 16:42:42 +00:00
"url_title": "my-first-blog", // the title you provide while creating a new blog, this appears in url
2019-05-09 16:19:54 +00:00
"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
}
```
2019-05-12 13:39:32 +00:00
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)
2019-05-09 16:19:54 +00:00
### 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.
2019-05-12 13:39:32 +00:00
If you have run build command before adding a blog you need have to remove the style attribute from `index.html` file aswell.
2019-05-09 16:19:54 +00:00
## License
